作为一名普通的程序开发者，日常开发中经常会遇到各种奇怪的问题。今天我来分享一个在 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 的相关配置，发现已经添加了 

。然而问题依旧存在，这就让人感到困惑了。

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

 字段时，浏览器才会允许该请求。

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

@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);
    }
}

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

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

在 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);
        }
    },
};

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

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

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

 字段。这说明后端虽然配置了 CORS，但实际上没有生效。

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

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

我们项目中使用 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 后，问题终于也是完美解决

这次跨域问题虽然看似简单，但排查过程却非常复杂。从后端配置到前端请求，再到反向代理的设置，每一个环节都可能成为问题的根源。通过逐步排查，最终找到了问题所在——Nginx 没有正确设置 CORS 头。

对于类似的问题，建议在开发过程中尽早测试接口，避免后期出现难以定位的问题。同时，合理配置反向代理也是确保前后端分离项目顺利运行的重要一步。

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

前端

后端

Vue3与Spring Boot项目跨域问题排查实录：从后端CORS配置到Nginx代理设置，详细解析如何解决"Access-Control-Allow-Origin"缺失问题，提供完整解决方案与排查思路，帮助开发者快速定位和修复跨域请求错误。

Spring Boot

服务器

Agent

域名特惠新用户低至1元！


domain

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

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

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐