Vue前端的跨域问题

Vue解决前后端分离的跨域问题

今天vue使用axios与java项目前后分离时，出现了CORS跨域的问题，

以前都是直接在后端controller类上加一个**@CrossOrigin**注解就能解决问题

但是这次不知道为什么还是会出现跨域的问题，我开始想是不是前端出了问题，于是我开始在前端进行设置跨域,在网上查了很多资料发现一种前端跨域的解决方式，亲测有效。

1，在main.js文件中加上

Vue.prototype.$axios=axios;
Vue.prototype.HOME = '/api’

2，在config下的index.js加上

’/api/*’: { //与Vue.prototype.HOME 的值一样
target: ‘http://localhost:8088/’, //数据连接
changeOrigin: true, //允许进行跨域
pathRewrite: {
“^/api”:"" //更改你的路径，因为你的路径会改变，需要改回来
}
}

target 中放的是你自己需要连接的路径host+port,我这里是本机加上8088的端口

注意：其他许多博客中显示 ’ /api’是没有效果的还是会报404错误，需要在后面加上/* 变成 '/api/*'

3，最后在你需要发送请求的vue页面像我一样

然后重启服务，一定要重启服务！！！！因为修改了config文件，最后就OK了！