跨域资源共享 (CORS)

一、什么是跨域？

跨域是指浏览器发起的请求，其目标服务器与当前页面的来源（域名、协议、端口）不一致。例如：

同源请求： 页面和接口来源一致，比如：
- 页面地址：http://example.com
- 请求接口：http://example.com/api
跨域请求： 页面和接口来源不同，比如：
- 页面地址：http://localhost:3000
- 请求接口：http://localhost:8080/api

跨域问题的根源在于 浏览器的同源策略（Same-Origin Policy），这是一种安全机制，防止恶意站点通过 JavaScript 等方式访问用户敏感数据。

同源策略限制：浏览器的同源策略只允许当前网页（前端）的域名、端口、和协议与后端一致。如果前后端运行在不同的端口、协议或域名下（如前端在 http://localhost:3000，后端在 http://localhost:8080），这就是跨域，浏览器会阻止请求。

跨域的目的：

如果跨域配置仅允许特定来源（如前端站点 http://localhost:3000）访问，那就是为了让你的前端能调用后端。
如果配置允许所有来源（*），则是为了对任何来源的请求都开放，可能包括来自其他网站或恶意来源。

二、跨域问题的表现及解决方案

表现： 当浏览器发起跨域请求时，如果目标服务器没有正确配置跨域资源共享（CORS），会报类似以下错误：

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

解决方案：
目标服务器通过 CORS 协议，明确告诉浏览器允许跨域请求。CORS 协议依赖以下 HTTP 头部字段：

Access-Control-Allow-Origin：允许的请求来源（如 http://localhost:3000 或 *）。
Access-Control-Allow-Methods：允许的请求方法（如 GET, POST）。
Access-Control-Allow-Headers：允许的请求头（如 Content-Type, Authorization）。
Access-Control-Allow-Credentials：是否允许发送 Cookies 和凭据。

三、Spring Boot 中的跨域处理

Spring Boot 提供了多种方式来配置 CORS，根据项目需求灵活选择。

1. 局部跨域配置

使用 @CrossOrigin 注解，在控制器或具体方法上配置跨域规则，适合简单场景。

示例代码：

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
public class MyController {@CrossOrigin(origins = "http://localhost:3000") // 允许来自 http://localhost:3000 的请求@GetMapping("/api/data")public String getData() {return "Hello, CORS!";}
}

优缺点：

优点： 配置简单，针对单个接口有效。
缺点： 对于多个接口的跨域需求不方便管理。

2. 全局跨域配置

方式 1：CorsRegistry

通过实现 WebMvcConfigurer 接口，配置全局跨域规则，适用于基于 Spring MVC 的项目。

示例代码：

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 WebConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**")  // 匹配所有接口.allowedOrigins("http://localhost:3000") // 允许的请求来源.allowedMethods("GET", "POST", "PUT", "DELETE") // 允许的请求方法.allowedHeaders("*") // 允许的请求头.allowCredentials(true) // 允许携带 Cookies 或凭据.maxAge(3600); // OPTIONS 预检请求的缓存时间}
}

方式 2：CorsWebFilter

对于基于 Spring WebFlux 的响应式项目，需要使用 CorsWebFilter 处理跨域。

示例代码：

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;@Configuration
public class CorsConfig {@Beanpublic CorsWebFilter corsWebFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration config = new CorsConfiguration();config.addAllowedOrigin("*"); // 允许所有来源config.addAllowedHeader("*"); // 允许所有请求头config.addAllowedMethod("*"); // 允许所有方法config.setAllowCredentials(true); // 允许凭据source.registerCorsConfiguration("/**", config);return new CorsWebFilter(source);}
}

两种方式的区别

CorsRegistry：
- 属于 Spring MVC，用于配置基于 Servlet 的传统 Web 应用。
- 实现 WebMvcConfigurer 接口，通过 addCorsMappings 方法设置 CORS 规则。
- 常用于传统的 Spring Boot Web 应用。
CorsWebFilter：
- 属于 Spring WebFlux，用于响应式（Reactive）编程模型的项目。
- 基于过滤器机制实现，配置较灵活。
- 适合需要处理响应式流的项目（如高并发或非阻塞请求）。

3. Spring Security 跨域处理

Spring Security 默认会拦截跨域请求，必须显式开启跨域支持。

代码示例：

import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;@Configuration
@EnableWebSecurity
public class SecurityConfig {@Overrideprotected void configure(HttpSecurity http) throws Exception {http.cors() // 启用跨域支持.and().csrf().disable(); // 禁用 CSRF，避免冲突}
}

注意：
Spring Security 只负责跨域支持的“开关”，具体跨域规则仍需通过 CorsRegistry 或 CorsWebFilter 等方式配置。

4. 通过配置文件处理跨域

Spring Boot 提供了简化的方式，通过 application.properties 或 application.yml 文件声明跨域规则，无需额外的配置类。

示例配置：

spring.web.cors.allowed-origins=http://localhost:3000
spring.web.cors.allowed-methods=GET,POST,PUT,DELETE
spring.web.cors.allowed-headers=*
spring.web.cors.allow-credentials=true
spring.web.cors.max-age=3600

优点：

配置简单，无需编写代码。
适用于跨域规则稳定的场景。

注意：
即使使用配置文件处理跨域，在 Spring Security 项目中仍需手动开启跨域支持（http.cors()）。

四、Spring Cloud Gateway 的跨域处理

在微服务架构中，Spring Cloud Gateway 通常作为 API 网关，代理不同微服务的请求。跨域请求可以在网关层统一处理，避免每个微服务都重复配置跨域。

方式 1：使用 CorsWebFilter

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;@Configuration
public class GatewayCorsConfig {@Beanpublic CorsWebFilter corsWebFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration config = new CorsConfiguration();config.addAllowedOrigin("*");config.addAllowedMethod("*");config.addAllowedHeader("*");config.setAllowCredentials(true);source.registerCorsConfiguration("/**", config);return new CorsWebFilter(source);}
}

方式 2：通过 `application.yml` 配置

spring:cloud:gateway:globalcors:cors-configurations:'[/**]':allowedOrigins: "http://localhost:3000"allowedMethods: "*"allowedHeaders: "*"allowCredentials: true

区别：