一桥爽、背景
我們知道纳击，傳統(tǒng)的Ajax請(qǐng)求只能獲取在同一個(gè)域名下的資源续扔，但是html5規(guī)范中打破了這些限制，允許ajax發(fā)起跨域請(qǐng)求(只是需要設(shè)置一下即可)焕数。而瀏覽器本身是也可以發(fā)起跨域請(qǐng)求的纱昧，如果你可以鏈接一個(gè)外域的圖片或者腳本，但是javascript腳本是不能獲取這些外域資源內(nèi)容的堡赔。CORS是一個(gè)w3c標(biāo)準(zhǔn)识脆，全程是“”跨域資源共享”，他允許瀏覽器向跨域服務(wù)器發(fā)出XMLHttpRequest請(qǐng)求善已，而從克服了ajax只能請(qǐng)求同源的限制灼捂。這種cors使用了一個(gè)額外的http響應(yīng)來(lái)賦予當(dāng)前user-agent(瀏覽器)獲得非同源資源的權(quán)限，這里的非同源就是cors-origin的概率换团，這里的權(quán)限就是訪問非同源的資源權(quán)限悉稠。cors是現(xiàn)在html5標(biāo)準(zhǔn)中的一部分，在大部分現(xiàn)在瀏覽器中都有所支持艘包，但可能在某些老版本的瀏覽器中不支持cors的猛，如要兼容一些老瀏覽器版本，則要采用jsonp進(jìn)行跨域請(qǐng)求辑甜，這一步相對(duì)來(lái)說就是一下特殊的需求
二衰絮、整體思路
經(jīng)典三步曲(第一步：pom加依賴；第二步：配置文件做配置磷醋；第三步：編代碼)?
三猫牡、代碼實(shí)現(xiàn)
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 {
? ? //這里為支持的請(qǐng)求頭，如果有自定義的header字段請(qǐng)自己添加（不知道為什么不能使用*）
? ? 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";//預(yù)檢緩存時(shí)長(zhǎng)
@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);//允許請(qǐng)求的方法;
? ? ? ? ? ? ? ? headers.add("Access-Control-Max-Age", MAX_AGE);
? ? ? ? ? ? ? ? headers.add("Access-Control-Allow-Headers", ALLOWED_HEADERS);//允許什么請(qǐng)求頭 *表示所有
? ? ? ? ? ? ? ? headers.add("Access-Control-Expose-Headers", ALLOWED_EXPOSE);//配置前端js允許訪問的自定義響應(yīng)頭
? ? ? ? ? ? ? ? headers.add("Access-Control-Allow-Credentials", "true");//允許后端服務(wù)跨域cookie傳到前端
? ? ? ? ? ? ? ? if (request.getMethod() == HttpMethod.OPTIONS) {
? ? ? ? ? ? ? ? ? ? response.setStatusCode(HttpStatus.OK);
? ? ? ? ? ? ? ? ? ? return Mono.empty();
? ? ? ? ? ? ? ? }
? ? ? ? ? ? }
? ? ? ? ? ? return chain.filter(ctx);
? ? ? ? };
? ? }
}
當(dāng)然邓线，在網(wǎng)關(guān)層解決跨域問的方法不止這一種淌友，大家也可以嘗試基于配置的解決方案。
以上的代碼是經(jīng)過本人運(yùn)行過的骇陈，希望對(duì)看到的您有所幫助震庭！
