Spring Boot + Vue 前后端分离项目解决跨域问题详解

Spring Boot + Vue 前后端分离项目解决跨域问题详解

在进行前后端分离开发时，跨域问题（CORS, Cross-Origin Resource Sharing）几乎是每个开发者都必须面对的挑战。本文将基于 Spring Boot + Vue 项目，详解如何优雅地解决跨域问题，并介绍几种常见方案及其适用场景。

---

一、什么是跨域问题？

跨域问题本质是浏览器的同源策略（Same-Origin Policy）限制了前端对不同源（协议、域名、端口）服务器的请求。

举例说明：

前端运行在 http://localhost:8080，而后端运行在 http://localhost:8081，两者的端口不同，属于"跨域"。

---

二、跨域的典型表现

当前端请求后端接口时，控制台报错类似如下：

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

---

三、Spring Boot 跨域解决方案

方法一：使用 @CrossOrigin 注解（推荐用于开发调试）

@RestController
@RequestMapping("/api")
@CrossOrigin(origins = "*") // 允许所有来源跨域
public class TestController {

    @GetMapping("/hello")
    public String sayHello() {
        return "Hello from backend!";
    }
}

你可以根据需要设置更严格的来源控制：

@CrossOrigin(origins = "http://localhost:8080")

缺点：需要对每个 Controller 或方法添加注解，维护成本高。

---

方法二：全局 CORS 配置（推荐生产使用）

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

优点：统一配置，适用于大型项目和生产环境。

---

方法三：使用自定义 Filter（可选方案）

@Component
public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
            throws IOException, ServletException {

        HttpServletResponse res = (HttpServletResponse) response;
        HttpServletRequest req = (HttpServletRequest) request;

        res.setHeader("Access-Control-Allow-Origin", req.getHeader("Origin"));
        res.setHeader("Access-Control-Allow-Methods", "GET,POST,PUT,DELETE,OPTIONS");
        res.setHeader("Access-Control-Allow-Headers", "*");
        res.setHeader("Access-Control-Allow-Credentials", "true");

        if ("OPTIONS".equalsIgnoreCase(req.getMethod())) {
            res.setStatus(HttpServletResponse.SC_OK);
        } else {
            chain.doFilter(request, response);
        }
    }
}

---

四、Vue 前端配置（开发环境）

Vue CLI 提供了 vue.config.js 来配置代理：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8081', // 后端服务地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

请求示例：

axios.get('/api/hello').then(res => {
  console.log(res.data);
});