您现在的位置是:网站首页> 内容页

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

  • 国际辉煌hui5557
  • 2019-03-07
  • 427人已阅读
简介跨域了解同源政策:所谓"同源"指的是"三个相同"。协议相同域名相同端口相同解决跨域jsonp缺点:只能get请求,需要修改B网站的代码cors这个方案缺点是ie67兼容不

跨域

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

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

解决跨域

    jsonp 缺点:只能get请求 ,需要修改B网站的代码cors 这个方案缺点 是 ie6 7 兼容不好(倒是不见得要兼容)。需要B网站在响应中加头postMessage 缺点也是 ie6 7 兼容不好(倒是不见得要兼容)。需要修改B网站的代码iframe window.name 传值得方式很巧妙,兼容性也很好。但是也是需要你能修改B网站代码服务端主动请求B网站,兼容性好而且你客户端的代码还是原来的ajax,缺点是感觉不好。(服务器端是不存在跨域安全限制的)类似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,所有接口都由本地代理了

文章评论

Top