一、背景
我们知道，传统的Ajax请求只能获取在同一个域名下的资源，但是html5规范中打破了这些限制，允许ajax发起跨域请求(只是需要设置一下即可)。而浏览器本身是也可以发起跨域请求的，如果你可以链接一个外域的图片或者脚本，但是javascript脚本是不能获取这些外域资源内容的。CORS是一个w3c标准，全程是“”跨域资源共享”，他允许浏览器向跨域服务器发出XMLHttpRequest请求，而从克服了ajax只能请求同源的限制。这种cors使用了一个额外的http响应来赋予当前user-agent(浏览器)获得非同源资源的权限，这里的非同源就是cors-origin的概率，这里的权限就是访问非同源的资源权限。cors是现在html5标准中的一部分，在大部分现在浏览器中都有所支持，但可能在某些老版本的浏览器中不支持cors，如要兼容一些老浏览器版本，则要采用jsonp进行跨域请求，这一步相对来说就是一下特殊的需求
二、整体思路
经典三步曲(第一步：pom加依赖；第二步：配置文件做配置；第三步：编代码)
三、代码实现
package com.charlie.cloudgataway.config;
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;
/**
* @Author: charlie
* @CreateTime: 2022/3/5
* Description: Gateway跨域处理
*/
@Configuration
public class CorsConfig {
//这里为支持的请求头，如果有自定义的header字段请自己添加（不知道为什么不能使用*）
private static final String ALLOWED_HEADERS = "x-requested-with, authorization, Content-Type, Authorization, credential, X-XSRF-TOKEN,token,username,client,apiKey,dataRegion";
private static final String ALLOWED_METHODS = "GET, PUT, POST, DELETE, OPTIONS";
private static final String ALLOWED_ORIGIN = "*";
private static final String ALLOWED_EXPOSE = "*";
private static final String MAX_AGE = "18000L";//预检缓存时长
@Bean
public WebFilter corsFilter() {
return (ServerWebExchange ctx, WebFilterChain chain) -> {
ServerHttpRequest request = ctx.getRequest();
if (CorsUtils.isCorsRequest(request)) {
ServerHttpResponse response = ctx.getResponse();
HttpHeaders headers = response.getHeaders();
headers.add("Access-Control-Allow-Origin", ALLOWED_ORIGIN);
headers.add("Access-Control-Allow-Methods", ALLOWED_METHODS);//允许请求的方法;
headers.add("Access-Control-Max-Age", MAX_AGE);
headers.add("Access-Control-Allow-Headers", ALLOWED_HEADERS);//允许什么请求头 *表示所有
headers.add("Access-Control-Expose-Headers", ALLOWED_EXPOSE);//配置前端js允许访问的自定义响应头
headers.add("Access-Control-Allow-Credentials", "true");//允许后端服务跨域cookie传到前端
if (request.getMethod() == HttpMethod.OPTIONS) {
response.setStatusCode(HttpStatus.OK);
return Mono.empty();
}
}
return chain.filter(ctx);
};
}
}
当然，在网关层解决跨域问的方法不止这一种，大家也可以尝试基于配置的解决方案。
以上的代码是经过本人运行过的，希望对看到的您有所帮助！
