跨域问题的常用解决方案
jsonp
cors
Node中间件代理(两次跨域)
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': ''
},
},
},