前言:我的Spring boot项目部署在8083端口,我的vue项目部署在8080端口,我想从8083端口拿到数据,这个不同端口之间的联系会涉及到跨越问题,在vue中如何解决跨域访问拿数据呢,请往下面看。
问题引起的原因:
-
这里以我的vue8080端口访问Spring boot8083开始。
后台部署情况
前台部署情况
跨越访问
所引发的问题
解决方案
-
配置基本的访问路径,找到src目录下的main.js文件,我们修改如下
-
配置代理路径,找到config下的index.js文件,修改如下
proxyTable: { //代理请求路径 /* 这个api就是main里面设置的Axios.defaults.baseURL = '/api' */ '/api': { /* 设置对象路径 */ target: "http://127.0.0.1:8083", /* 开启跨域 */ changeOrigin:true, pathRewrite:{ '^/api':'' } } },
-
修改访问请求路径
注意这里的axios是main.js里面设置的那个全局$axios,因为设置了默认请求,所有/getInfo前面默认就有index.js里面设置的“http://127.0.0.1:8083”,两个合起来就是“http://127.0.0.1:8083/getInfo”. -
测试结果,测试之前要把前端重启一下,因为修改了。
可以看到完全没有问题的。
版权声明:本文为qq_22194659原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。