专栏首页Krryblog跨域 webpack + vue-cil 中 proxyTable 处理跨域

跨域 webpack + vue-cil 中 proxyTable 处理跨域

跨域

了解同源政策:所谓"同源"指的是"三个相同"。

  • 协议相同
  • 域名相同
  • 端口相同

解决跨域

  1. jsonp 缺点:只能get请求 ,需要修改B网站的代码
  2. cors 这个方案缺点 是 ie6 7 兼容不好(倒是不见得要兼容)。需要B网站在响应中加头
  3. postMessage 缺点也是 ie6 7 兼容不好(倒是不见得要兼容)。需要修改B网站的代码
  4. iframe window.name 传值得方式很巧妙,兼容性也很好。但是也是需要你能修改B网站代码
  5. 服务端主动请求B网站,兼容性好而且你客户端的代码还是原来的ajax,缺点是感觉不好。(服务器端是不存在跨域安全限制的)
  6. 类似5 用nginx把B网站的数据url反向代理。

node, express 解决跨域

  • 加上请求头:
1 app.all('*', (req, res, next)=>{
2     res.header("Access-Control-Allow-Origin", "*");
3     res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
4     res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
5     res.header("X-Powered-By",' 3.2.1')
6 
7     if(req.method=="OPTIONS") res.send(200);/*让options请求快速返回*/
8     else next();
9 });

重点说一下vue-cli处理跨域

  • 前后端分离的项目,常常开发的时候,请求的接口地址存在跨域问题
  • webpack 前后端分离开发接口调试解决方案,proxyTable解决方案
  • 首先要在项目目录中找到根目录下config文件夹下的index.js文件。由于我们是在开发环境下使用,自然而然是要配置在dev里面:
 1 port: 8080,
 2 proxyTable: {
 3   '/api': {
 4     target: 'http://www.ainyi.com',  // 目标接口域名
 5     changeOrigin: true,  // 是否跨域
 6     // secure: false,  // 如果是https接口,需要配置这个参数
 7     pathRewrite: {
 8       '^/api': ''   // 重写接口,一般不更改
 9     }
10   },
11 },
  • '/api' 为匹配项,target 为被请求的地址
  • 以上代码表示:只要是http://www.ainyi.com/api的接口,都将被本地8080端口的请求代理: http://localhost:8080/api ===> http://www.ainyi.com/api
  • 也就是说,想请求接口http://www.ainyi.com/api,就是通过http://localhost:8080/api代理访问,就不会产生跨域。
  • 这样就不需要在axios配置axios.defaults.baseURL,所有接口都由本地代理了

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 博客首页加载的优化

    从刚做好这个博客不就第一次就发现了,发起 ajax 请求时,可以看到 content-download 的时间居然比 waiting 的时间还长,而且首页等待时...

    Krry
  • spring+springMVC 整合 MongoDB 实现注册登录

    发现一入手 MongoDB,便无法脱离,简要说一下,MongoDB 是一个介于关系数据库和非关系数据库之间的产品,是非关系数据库当中功能最丰富,最像关系数据库的...

    Krry
  • JavaScript 异步编程

    众所周知,JavaScript 是单线程的,但异步在 js 中很常见,那么简单来介绍一下异步编程

    Krry
  • 抽象类和接口

    只声明了方法,同时使用了abstract修饰,没有方法体!必须要子类来重写!

    帅飞
  • java基础面试题

    堆中存放的是对象或者数组或者方法,每次创建一个对象或者数组就会在堆开辟一块位置存放,而这个位置会有一个路径,这个指向的路径存在在栈中 栈中存放的是实例对象或者方...

    java攻城狮
  • 如何实现一个会讲笑话的Python程序?

    笑话从哪里来?自己写肯定是不现实的。在这个“云”的时代,各种云都有,自然是不缺开放API的(大部分都是免费的)。随意一搜,果然被我找到一个接口:易源_笑话大全h...

    小小科
  • 干货 | 一些常用的api接口

    在工作或是学习中我们经常会使用到一些api,这些api是该网站用于查询或者是测试的接口。有了它们,我们甚至不需要登录该网站就能完成自己所想的目标。今天我就将一些...

    编程思录
  • 前端API层架构,也许你做得还不够

    上午好,今天为大家分享下个人对于前端API层架构的一点经验和看法。架构设计是一条永远走不完的路,没有最好,只有更好。这个道理适用于软件设计的各个场景,前端API...

    Tusi
  • Java8 函数式接口(Functional interfaces)

    我们声明一个接口,如果满足这个条件,就是函数式接口;编译器会自行检测这个接口是否是一个函数式接口(并不是简单的统计方法数量,是看上面的三个条件),我们也可以显示...

    IT云清
  • 运维建设的方向和思路

    今天和同事聊需求的时候,突然发现目前我们在做的一些系统,其实他感觉有些迷茫,主要就是一个建设的思路和方向这一块,我想了下,也确实,目前来看,其实系统的功能初期避...

    jeanron100

扫码关注云+社区

领取腾讯云代金券