全栈开发 - 从 Vue 配置中解决 CORS 跨域问题（2分钟搞定）

原创已于 2025-06-30 17:37:11 修改 · 2.9k 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-10-19 18:53:40 首次发布

本文介绍从 Vue 角度解决 CORS 跨域问题。若后端用微服务项目，可通过配置网关解决；用 SpringBoot + Vue 项目，在 Controller 上加 @CrossOrigin 可解决，但配置拦截器后较难处理。可在 Vue 中修改统一配置的 axios 实例和 config 文件夹下的 index.js 文件，配置完重启前端项目即可。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

免费查看本文章可前往我的网站：PiQiu

b）修改 config 文件夹下的 index.js 文件

c）完成

一、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 等价于前面的目标地址
                }
            }