[email protected]跨域的替代方案

跨域问题的常用解决方案

1. jsonp

2. cors

3. Node中间件代理(两次跨域)

4. nginx反向代理

CORS支持所有类型的HTTP请求，是跨域HTTP请求的根本解决方案

JSONP只支持GET请求，JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

不管是Node中间件代理还是nginx反向代理，主要是通过同源策略对服务器不加限制。

日常工作中，用得比较多的跨域方案是cors和nginx反向代理。

此次为前端调试 ，我使用的是vue的proxy配置， vue 中的 proxy 就是利用了 Node 代理。

请求需求

我要在本地调用 http://172.0.0.0:9979/wsg-log-server/v1/im2_logfmtinfo_tree_views

此时可以在package.json 同级新建 vue.config.js配置

文件内容

devServer: {

proxy: {

'/api': {

target: 'http://172.0.0.0:9979/', // 后台接口域名

ws: true, //如果要代理 websockets，配置这个参数

secure: false, // 如果是https接口，需要配置这个参数

changeOrigin: true, //是否跨域

pathRewrite:{

'^/api': '/'

}

}

}

}

此时调用

this.$api({

url:"api/wsg-log-server/v1/im2_logfmtinfo_tree_views",

}).then(res=>{

console.log(res.data)

this.imglist = res.data.data

})

实际访问地址为 http://172.0.0.0:9979/wsg-log-server/v1/im2_logfmtinfo_tree_views

控制台显示 调用地址 http: //localhost:8080/api/wsg-log-server/v1/im2_logfmtinfo_tree_views

但是此配置只适用于vue-cli@3.x 而我们的新项目采用的是vue-cli@4.x 所以此配置在项目中无法使用

通过查找资料发现这种配置在个别的项目中可以正常使用，所以网上的资料大部分并没有提到版本对代理的影响

通过查找资料发现vue-cli@4.x不支持这种代理

现改用webpack做代理 解决跨域问题 ，此方法只适用于本地开发 。

在build同级文件夹config内index.js dev：内添加如下代码

proxyTable: {

'/api': {

target: 'http://172.0.0.0:9979/', //API服务器的地址

changeOrigin: true,

pathRewrite: {

'^/api': ''

},

},

},