Vue3 + Spring Boot 项目中跨域问题的排查与解决

最新推荐文章于 2025-09-26 08:08:03 发布

原创最新推荐文章于 2025-09-26 08:08:03 发布 · 839 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#Java全栈面试指南大全

Java全栈面试指南大全专栏收录该内容

978 篇文章

订阅专栏

前言

作为一名普通的程序开发者，日常开发中经常会遇到各种奇怪的问题。今天我来分享一个在 Vue3 和 Spring Boot 混合开发项目中遇到的真实跨域问题。这个问题看似简单，但实际排查过程却让我花了不少时间。本文将从问题现象、分析思路、排查步骤到最终解决方案，一步步还原整个调试过程。

问题现象

在我们团队的一个前后端分离项目中，前端使用的是 Vue3，后端是 Spring Boot。正常情况下，前端通过 axios 调用后端接口应该能成功获取数据。但在某次更新之后，发现某些接口调用失败，浏览器控制台提示如下错误：

Access to fetch at 'http://api.example.com/data' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

起初我以为是后端配置出了问题，但查看了 Spring Boot 的相关配置，发现已经添加了 @CrossOrigin 注解，并且也设置了 spring.mvc.cors.allowed-origins。然而问题依旧存在，这就让人感到困惑了。

问题分析

首先，我回顾一下 Vue3 和 Spring Boot 的通信机制。前端通过 axios 发送请求，后端通过 Spring Boot 提供 REST 接口。跨域问题是由于浏览器的安全策略导致的，只有当后端返回的响应头中包含 Access-Control-Allow-Origin 字段时，浏览器才会允许该请求。

可能的原因包括：

后端没有正确设置 CORS 配置
前端请求的域名和后端配置的允许域名不一致
请求方式或请求头不符合 CORS 规范
使用了代理服务器，但未正确配置

排查步骤

1. 检查后端 CORS 配置

首先确认后端是否真的启用了 CORS 支持。我们在 Spring Boot 中通常有两种方式启用 CORS：

方式一：使用 `@CrossOrigin` 注解

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "http://localhost:8081")
public class DataController {
    @GetMapping("/data")
    public ResponseEntity<String> getData() {
        return ResponseEntity.ok("Hello from backend!");
    }
}

方式二：全局配置

@Configuration
@EnableWebMvc
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
                .allowedOrigins("http://localhost:8081")
                .allowedMethods("GET", "POST")
                .allowedHeaders("*")
                .exposedHeaders("Access-Control-Allow-Origin")
                .maxAge(3600)
                .allowCredentials(true);
    }
}

但即使这样，仍然无法解决问题，说明可能还有其他问题。

2. 使用 Postman 测试接口

为了排除前端问题，我尝试使用 Postman 直接访问后端接口，结果发现接口可以正常返回数据，说明后端逻辑没问题。这说明问题出在浏览器的 CORS 策略上。

3. 检查前端请求配置

在 Vue3 中，我们使用 axios 发送请求，代码如下：

import axios from 'axios';

const apiClient = axios.create({
    baseURL: 'http://api.example.com',
    timeout: 5000,
});

export default {
    async fetchData() {
        try {
            const response = await apiClient.get('/data');
            console.log(response.data);
        } catch (error) {
            console.error('Error fetching data:', error);
        }
    },
};

看起来没有问题，但问题还是存在。

4. 检查浏览器控制台输出

再次打开浏览器控制台，发现除了之前的错误信息外，还有一条额外的信息：

Request URL: http://api.example.com/data
Request Method: GET
Status Code: 200 OK
Remote Address: 127.0.0.1:8080
Referrer Policy: no-referrer-when-downgrade

但是，响应头中并没有 Access-Control-Allow-Origin 字段。这说明后端虽然配置了 CORS，但实际上没有生效。

5. 检查后端日志

查看 Spring Boot 应用的日志，发现确实有请求到达，但没有看到任何关于 CORS 的日志。这说明可能是 Spring Boot 的 CORS 配置没有被正确加载。

6. 检查 Spring Boot 的依赖和版本

发现我们的项目中使用的是 Spring Boot 2.6.x，而有些 CORS 相关的类在较新的版本中发生了变化。我们尝试升级到 Spring Boot 2.7.x，问题依然存在。

7. 检查是否使用了反向代理

我们项目中使用 Nginx 作为反向代理。检查 Nginx 配置文件，发现没有设置 Access-Control-Allow-Origin 头，因此导致浏览器认为请求被拦截。

8. 修改 Nginx 配置

在 Nginx 配置中添加以下内容：

location /api {
    proxy_pass http://localhost:8080;
    add_header 'Access-Control-Allow-Origin' '*';
    add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
    add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain; charset=utf-8';
    add_header 'Content-Length' 0;
}

保存并重启 Nginx 后，问题终于也是完美解决