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
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了