springboot 配置跨域访问

什么是 CORS？

CORS，全称是“跨源资源共享”（Cross-Origin Resource Sharing），是一种Web应用程序的安全机制，用于控制不同源的资源之间的交互。

在Web应用程序中，CORS定义了一种机制，通过该机制，浏览器能够限制哪些外部网页可以访问来自不同源的资源。源由协议、域名和端口组成。当一个网页请求另一个网页上的资源时，浏览器会检查请求是否符合CORS规范，以确定是否允许该请求。

CORS的工作原理是：当浏览器发送一个跨域请求时，它会附加一些额外的头部信息到请求中，这些头部信息包含了关于请求的来源和目的的信息。服务器可以检查这些头部信息并决定是否允许该请求。如果服务器允许请求，它会返回一个响应，其中包含一个名为“Access-Control-Allow-Origin”的头部信息，该信息指定了哪些源可以访问该资源。浏览器会检查返回的“Access-Control-Allow-Origin”头部信息，以确定是否允许该跨域请求。

通过使用CORS，开发人员可以控制哪些外部网页可以访问他们的资源，从而提高应用程序的安全性。

Spring Boot 如何配置 CORS?

Spring Boot对于跨域请求的支持可以通过两种配置方式来实现：

注解配置：可以使用@CrossOrigin注解来启用CORS。例如，在需要支持跨域请求的方法上添加@CrossOrigin注解，并配置好origins和maxAge等参数。
全局配置：可以通过实现WebMvcConfigurer接口并注册一个WebMvcConfigurer bean来配置CORS的全局设置。在实现类中覆盖addCorsMappings方法，通过CorsRegistry对象添加映射规则。默认情况下，所有方法都支持跨域，并且GET、POST和HEAD请求是被允许的。如果需要自定义，可以配置CorsRegistry对象来指定允许的域名、端口和请求方法等。
过滤器配置：可以通过CorsFilter bean来配置CORS的过滤器。这种方式可以更加灵活地控制CORS的配置，例如只允许特定的域名进行跨域访问等。

前端代码

request.ts

import axios from "axios";const myAxios = axios.create({baseURL: process.env.VUE_APP_API_BASE_URL,timeout: 10000,// 携带cookiewithCredentials: true,
});// 添加请求拦截器
myAxios.interceptors.request.use(function (config) {// 在发送请求之前做些什么return config;},function (error) {// 对请求错误做些什么return Promise.reject(error);}
);// 添加响应拦截器
myAxios.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么return response;},function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么return Promise.reject(error);}
);export default myAxios;

user.ts

import myAxios from "@/utils/request";/*** 获取用户列表* @param username*/
export const searchUsers = async () => {return myAxios.request({url: `/admin/findAll`,method: "GET",});
};};

vue页面使用

<script setup lang="ts">
import { searchUsers } from "@/api/user";searchUsers().then((res) => {console.log(res);
});
</script>

一、在 Controller 上添加 @CrossOrigin 注解

这种方式适合只有一两个rest接口需要跨域或者没有网关的情况下

@RestController
@CrossOrigin(origins = {"http://127.0.0.1:9527"}, allowCredentials = "true")
public class HelloController {@GetMapping("/hello")public String hello(){return "Hello";}}

@CrossOrigin 注解有几个属性，允许你更精细地控制跨域行为：

* origins: 允许的源列表，可以是域名、IP 或其他标识符。多个源可以使用逗号分隔。

* methods: 允许的 HTTP 方法列表。例如，只允许 GET 请求。

* allowedHeaders: 允许的请求头列表。默认情况下，允许所有请求头。

* allowCredentials：是否允许携带cookie；值为true、false的字符串

* maxAge: 预检请求的缓存时间（以秒为单位）。默认是 86400 秒（24小时）

二、增加 WebMvcConfigurer 全局配置

如果有大量的rest接口的时候，显然第一种方案已经不适合了，工作量大，也容易出错，那就通过全局配置的方式，允许SpringBoot端所有的rest接口都支持跨域访问

addCorsMappings 是 Spring Boot 中用于配置跨域请求的方法。它允许你指定哪些路径的请求需要进行跨域处理，以及如何处理这些请求。

@Configuration
public class CrosConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {// 允许所有请求路径跨域访问registry.addMapping("/**") // 是否携带Cookie，默认false.allowCredentials(true) // 允许的请求头类型.allowedHeaders("*")// 预检请求的缓存时间（单位：秒）.maxAge(3600)  // 允许的请求方法类型.allowedMethods("*") // 允许哪些域名进行跨域访问.allowedOrigins("http://127.0.0.1:5500");}
}

假如我们配置了 addCorsMappings ，项目里还用了 Interceptor，此时就会发生问题！

例如部分接口需要 jwt 权限验证：

 public void addInterceptors(InterceptorRegistry registry) {registry.addInterceptor(new JwtInterceptor()).addPathPatterns("/user/**").excludePathPatterns("/login");}

正常请求是没问题的，但是部分请求没带 token 的话，此时浏览器直接报跨域问题，好像 addCorsMappings 失效了一样。

主要原因是因为请求顺序导致的，请求会先进入拦截器，默认配置了 addCorsMappings 操作后，实际上会加了一个 CorsInterceptor，但是这个拦截器的优先级在最后。

所以，如果一个请求被前面的拦截器拦截后，直接返回，就不会经过 CorsInterceptor，这样一来返回的响应头上就不包含跨域的相关信息，因此浏览器就会继续报跨域错误！

此时有一种方法，就是在 JwtInterceptor 内直接放行预检请求，让它能访问到 CorsInterceptor 添加响应头。

if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {return true;
}

还有一种更优雅的方式就是使用 CorsFilter

Filter 是过滤器，它是属于 servlet，而 Interceptor 是属于 Spring 的，因此 Filter 执行的优先级高于 Interceptor。

三、过滤器配置

在Spring Boot中，CorsFilter用于处理跨域请求。它是一个过滤器，用于在Spring应用程序中启用CORS（跨源资源共享）支持。


/*** 简单跨域就是GET，HEAD和POST请求，但是POST请求  的"Content-Type"只能是* application/x-www-form-urlencoded, multipart/form-data 或 text/plain* 反之，就是非简单跨域，此跨域有一个预检机制，会发两次请求，一次OPTIONS请求，一次真正的请求,* OPTIONS请求服务器确认允许的请求方法，请求域等信息，符合要求发真正的请求，不符合报 cors 错误
*/
@Configuration
public class CorsConfig {@Beanpublic CorsFilter corsFilter(){CorsConfiguration config = new CorsConfiguration();config.addAllowedHeader("*");config.addAllowedMethod("*");config.addAllowedOriginPattern("http://127.0.0.1:5500");config.setAllowCredentials(true);UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();source.registerCorsConfiguration("/**",config);return  new CorsFilter(source);}

注意事项

当我们没有配置跨域的时候会提示:

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

当我们前端开启 withCredentials:true 的时候，后端没有配置allowCredentials为true会提示：

Access to XMLHttpRequest at 'http://localhost:8080/hello' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

当我们在后端配置了allowCredentials(true)那么就不能配置allowedOrigins("*")，必须指定来源或者使用 allowedOriginPatterns(*)

jakarta.servlet.ServletException: Request processing failed: java.lang.IllegalArgumentException: When allowCredentials is true, allowedOrigins cannot contain the special value "*" since that cannot be set on the "Access-Control-Allow-Origin" response header. To allow credentials to a set of origins, list them explicitly or consider using "allowedOriginPatterns" instead.

以上这种方案如果微服务多的话，需要在每个服务的主类上都加上这么段代码，增加了维护量。

以上三种方案都是在SpringBoot的基础上实现的解决方案，在模块较多或者接口较多的情况下不易维护。

既然SpringCloud自带Gateway，下面就讲讲使用Gateway的跨域解决方案。

Spring cloud Gateway 配置CORS

过滤器配置

这种方案跟方案三有些类似，只不过是放到了Gateway端，对于有多个微服务模块的情况下，就大大减少了SpringBoot模块端的代码量，让各个模块更集中精力做业务逻辑实现。这个方案只需要在Gateway里添加Filter代码类即可。

public class CorsWebFilter implements WebFilter {private static final String ALL = "*";private static final String MAX_AGE = "18000L";@Overridepublic Mono<Void> filter(ServerWebExchange ctx, WebFilterChain chain) {ServerHttpRequest request = ctx.getRequest();String path = request.getPath().value();ServerHttpResponse response = ctx.getResponse();if ("/favicon.ico".equals(path)) {response.setStatusCode(HttpStatus.OK);return Mono.empty();}if (!CorsUtils.isCorsRequest(request)) {return chain.filter(ctx);}HttpHeaders requestHeaders = request.getHeaders();HttpMethod requestMethod = requestHeaders.getAccessControlRequestMethod();HttpHeaders headers = response.getHeaders();headers.add(HttpHeaders.ACCESS_CONTROL_ALLOW_ORIGIN, requestHeaders.getOrigin());headers.addAll(HttpHeaders.ACCESS_CONTROL_ALLOW_HEADERS, requestHeaders.getAccessControlRequestHeaders());if (requestMethod != null) {headers.add(HttpHeaders.ACCESS_CONTROL_ALLOW_METHODS, requestMethod.name());}headers.add(HttpHeaders.ACCESS_CONTROL_ALLOW_CREDENTIALS, "true");headers.add(HttpHeaders.ACCESS_CONTROL_EXPOSE_HEADERS, ALL);headers.add(HttpHeaders.ACCESS_CONTROL_MAX_AGE, MAX_AGE);if (request.getMethod() == HttpMethod.OPTIONS) {response.setStatusCode(HttpStatus.OK);return Mono.empty();}return chain.filter(ctx);}
}

或者这样

import org.springframework.cloud.gateway.filter.ratelimit.KeyResolver;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpHeaders;
import org.springframework.http.HttpMethod;
import org.springframework.http.HttpStatus;
import org.springframework.http.server.reactive.ServerHttpRequest;
import org.springframework.http.server.reactive.ServerHttpResponse;
import org.springframework.web.cors.reactive.CorsUtils;
import org.springframework.web.server.ServerWebExchange;
import org.springframework.web.server.WebFilter;
import org.springframework.web.server.WebFilterChain;
import reactor.core.publisher.Mono;@Configuration
public class BeanConfig {/*** 跨域配置** @return*/@Beanpublic WebFilter corsFilter() {return (ServerWebExchange ctx, WebFilterChain chain) -> {ServerHttpRequest request = ctx.getRequest();if (!CorsUtils.isCorsRequest(request)) {return chain.filter(ctx);}HttpHeaders requestHeaders = request.getHeaders();ServerHttpResponse response = ctx.getResponse();HttpMethod requestMethod = requestHeaders.getAccessControlRequestMethod();HttpHeaders headers = response.getHeaders();String origin = requestHeaders.getOrigin();// 设置允许跨域headers.setAccessControlAllowCredentials(true);headers.set(HttpHeaders.ACCESS_CONTROL_ALLOW_ORIGIN, origin);if (requestMethod != null) {headers.set(HttpHeaders.ACCESS_CONTROL_ALLOW_METHODS, requestMethod.name());}headers.addAll(HttpHeaders.ACCESS_CONTROL_ALLOW_HEADERS, requestHeaders.getAccessControlRequestHeaders());headers.add(HttpHeaders.ACCESS_CONTROL_EXPOSE_HEADERS, "*");headers.set(HttpHeaders.ACCESS_CONTROL_MAX_AGE, "180");if (request.getMethod() == HttpMethod.OPTIONS) {response.setStatusCode(HttpStatus.OK);return Mono.empty();}return chain.filter(ctx);};}}

Gateway配置文件

修改配置文件即可，结合配置中心使用，可以实现动态修改。

application.yml

spring:cloud:gateway:      globalcors:        corsConfigurations:'[/**]': allowedOrigins: "http://domain.com"allowedMethods:- GET- POST