vue前端设置跨域(跨端口)
前端项目访问接口是8080,后台项目提供接口是8081,这种跨端口的跨域问题,前端处理方案如下
·
问题描述:
前端项目部署在8080,联调时后台项目部署在8083,发生跨域问题
原因分析:
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
当前页面url | 被请求页面url | 是否跨域 | 原因 |
---|---|---|---|
http://www.test.com/ | http://www.test.com/index.html | 否 | 同源(协议、域名、端口号相同) |
http://www.test.com/ | https://www.test.com/index.html | 跨域 | 协议不同(http/https) |
http://www.test.com/ | http://www.baidu.com/ | 跨域 | 主域名不同(test/baidu) |
http://www.test.com/ | http://blog.test.com/ | 跨域 | 子域名不同(www/blog) |
http://www.test.com:8080/ | http://www.test.com:7001/ | 跨域 | 端口号不同(8080/7001) |
解决方案:
1、配置基本的访问路径,找到src目录下的main.js文件,我们修改如下
2、配置代理路径,找到config下的index.js文件,修改如下
设置跨域信息:
proxyTable: { //代理请求路径
/* 这个api就是main里面设置的Axios.defaults.baseURL = '/api' */
'/api': {
/* 设置对象路径 */
target: "http://127.0.0.1:8083",
/* 开启跨域 */
changeOrigin:true,
pathRewrite:{
'^/api':''
}
}
},
3、修改访问请求路径
注意这里的axios是main.js里面设置的那个全局$axios,因为设置了默认请求,所有/getInfo前面默认就有index.js里面设置的“http://127.0.0.1:8083”,两个合起来就是“http://127.0.0.1:8083/getInfo”.
4、验证结果
更多推荐
已为社区贡献1条内容
所有评论(0)