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

怼烎@ 2024-03-27 18:25 44阅读 0赞

**目录**

一、CORS 跨域问题解决

1.1、前言

1.2、解决办法

a）修改统一配置的 axios 实例

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

c）完成

--------------------

## 一、CORS 跨域问题解决 ##

--------------------

#### 1.1、前言 ####

![413659977409497da100e27be264c379.png][]

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

如果你使用 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 文件.

添加如下配置

![8523a492d25a4b3c873a5edf902ff51f.png][]

'/api': {
                    target: 'http://localhost:8010', //目标 url
                    changeOrigin: true, //是否跨域
                    pathRewrite: {
                        '^/api': '' //其中 /api 等价于前面的目标地址
                    }
                }

#### c）完成 ####

**配置完了以后，一定要重启前端项目，重新 npm run dev ！！**

通过以上配置，后端也就无需担忧跨域问题了~

![d247ea4eb24645839390d69421821e56.gif][]

[413659977409497da100e27be264c379.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/f8049c609bcf428ba8959bfe2e85b89e.png
[8523a492d25a4b3c873a5edf902ff51f.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/6077eb4661eb449a94999c67303d0f77.png
[d247ea4eb24645839390d69421821e56.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/11/0a3f23494a98471186a46cf317bd9f57.png