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 {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**").allowedOrigins("*").allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS").maxAge(3600).allowedHeaders("*");}
}

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

---

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

@Component
public class CorsFilter implements Filter {@Overridepublic 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);
});