Vue 配置中解决 CORS 跨域问题【亲测，跨坑！】

看了网上很多资料，很多不全，只是针对部分场景。请看到最后：

一、CORS 跨域问题解决
1.1、前言

如果你后端使用的是微服务项目，通过配置网关可以很好的解决跨域问题；

如果你使用 SpringBoot + Vue 来写项目，可以在 Controller 上加 @CrossOrigin 来解决跨域，但是一旦你在后端配置了拦截器（比如通过 HandlerInterceptor 配置登录拦截器），那么此时再解决跨域这个问题就很困难了.

Ps：在网上搜索 "Spring Boot 拦截器跨域问题解决" 会有大把大把的办法，但亲测没一个能用...

实际上，可以从 Vue 的角度来解决这个问题，只需要在 Vue 中进行如下配置即可.

1.2、解决办法
a）修改统一配置的 axios 实例
在 Vue 脚手架中，按照标准开发，一般会创建一个 utils 文件夹，里面创建一个 request.js 文件来统一封装 axios.

这里我们修改 axios 实例中的 baseURL 如下：

//构建统一 axios 实例
const instance = axios.create({
baseURL: "/api",
timeout: 5000
});
Ps：不要管为什么，你先配置！修改的这些配置将来都不会影响你的原有的操作！

b）修改 config 文件夹下的 index.js 文件
在 Vue2 中，config 目录下有一个 index.js 文件.

添加如下配置 

'/api': {
target: 'http://localhost:8010', //目标 url
changeOrigin: true, //是否跨域
pathRewrite: {
'^/api': '' //其中 /api 等价于前面的目标地址
}
}
c）完成
配置完了以后，一定要重启前端项目，重新 npm run dev ！！

通过以上配置，后端也就无需担忧跨域问题了~
一般情况下，到这就OK了！But，不稳定，过一会又失效了@_@-，总结一下解决方案：

step 1：

修改 config 文件夹下的 index.js 文件
在 Vue2 中，config 目录下有一个 index.js 文件.

 

添加如下红色框里的配置 ：

 step 2：

修改 config 文件夹下的 dev.env.js 文件：
增加红框里的内容

 Step 3：

在实际引入 axios使用的 js 文件里，增加一行：

如下调用：

　　 axios.post(XXXX),then(......，这里的XXX不需要写要访问的服务端http地址了，也不需要写"/api"即可

 step 4：

重新启动 ：

　　npm run dev