使用SpringCloudApiGateway之支持Cors跨域請求
問題背景
公司的項目需要前后端分離,vue+java,這時候就需要支持Cors跨域請求了。最近對zuul進行升級,假如說zuul是1.0的話,api gateway就是2.0的網(wǎng)關(guān),支持ws等,基于NIO,各方面還是強大的。
解決方案
新建一個Configuration類即可
import org.springframework.cloud.client.discovery.DiscoveryClient;
import org.springframework.cloud.gateway.discovery.DiscoveryClientRouteDefinitionLocator;
import org.springframework.cloud.gateway.route.RouteDefinitionLocator;
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;
/**
* SpringApiGateway Cors
*/
@Configuration
public class RouteConfiguration {
//這里為支持的請求頭,如果有自定義的header字段請自己添加(不知道為什么不能使用*)
private static final String ALLOWED_HEADERS = "x-requested-with, authorization, Content-Type, Authorization, credential, X-XSRF-TOKEN,token,username,client";
private static final String ALLOWED_METHODS = "*";
private static final String ALLOWED_ORIGIN = "*";
private static final String ALLOWED_Expose = "x-requested-with, authorization, Content-Type, Authorization, credential, X-XSRF-TOKEN,token,username,client";
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);
headers.add("Access-Control-Allow-Credentials", "true");
if (request.getMethod() == HttpMethod.OPTIONS) {
response.setStatusCode(HttpStatus.OK);
return Mono.empty();
}
}
return chain.filter(ctx);
};
}
/**
*
*如果使用了注冊中心(如:Eureka),進行控制則需要增加如下配置
*/
@Bean
public RouteDefinitionLocator discoveryClientRouteDefinitionLocator(DiscoveryClient discoveryClient) {
return new DiscoveryClientRouteDefinitionLocator(discoveryClient);
}
}
application.yml配置
官方文檔提及到還有另外一種方式,就是通過yml來配置。
spring:
cloud:
gateway:
globalcors:
corsConfigurations:
'[/**]':
allowedOrigins: "https://blog.csdn.net/moshowgame"
allowedMethods:
- GET
跨域解決方案(CORS)
1. 什么是跨域?
跨域問題是出于瀏覽器的【同源策略】限制。同源策略(Sameoriginpolicy)是一種約定,它是瀏覽器最核心也最基本的安全功能,如果缺少了同源策略,則瀏覽器的正常功能可能都會受到影響。
可以說Web是構(gòu)建在同源策略基礎(chǔ)之上的,瀏覽器只是針對同源策略的一種實現(xiàn)。同源策略會阻止一個域的javascript腳本和另外一個域的內(nèi)容進行交互。
所謂同源(即指在同一個域)就是兩個頁面具有相同的協(xié)議(protocol),主機(host)和端口號(port)
由于我們現(xiàn)在是采用的前后端分離的微服務(wù)架構(gòu),前端和后端必定存在跨域問題。解決跨域問題可以采用CORS。
2. CORS簡介
CORS 是一個 W3C 標準,全稱是"跨域資源共享"(Cross-origin resource sharing)。
CORS需要瀏覽器和服務(wù)器同時支持。但是目前基本上瀏覽器都支持,所以我們只要保證服務(wù)器端服務(wù)器實現(xiàn)了 CORS 接口,就可以跨源通信。
瀏覽器將CORS請求分成兩類:簡單請求(simple request)和非簡單請求(not-so-simple request)。
3. 具體解決方式
解決跨域問題,就是在服務(wù)器端給響應(yīng)添加頭信息
| Name | Required | Comments |
|---|---|---|
| Access-Control-Allow-Origin | 必填 | 允許請求的域 |
| Access-Control-Allow-Methods | 必填 | 允許請求的方法 |
| Access-Control-Allow-Headers | 可選 | 預(yù)檢請求后,告知發(fā)送請求需要有的頭部 |
| Access-Control-Allow-Credentials | 可選 | 表示是否允許發(fā)送cookie,默認false; |
| Access-Control-Max-Age | 可選 | 本次預(yù)檢的有效期,單位:秒; |
3.1 在Spring Boot 中解決
在spring boot中給我們提供了 @CrossOrigin 注解用于解決跨域問題。
使用場景要求:jdk1.8+、Spring4.2+
只需要在我們需要的controller上加@CrossOrigin
@RestController
//實現(xiàn)跨域注解
//origin="*"代表所有域名都可訪問
//maxAge飛行前響應(yīng)的緩存持續(xù)時間的最大年齡,簡單來說就是Cookie的有效期 單位為秒若maxAge是負數(shù),則代表為臨時Cookie,不會被持久化,Cookie信息保存在瀏覽器內(nèi)存中,瀏覽器關(guān)閉Cookie就消失
@CrossOrigin(origins = "*",maxAge = 3600)
@RequestMapping("/album")
public class AlbumController {}
3.2 在spring Cloud中解決
只需要在spring Cloud Gateway 服務(wù)中添加配置就行
spring:
application:
name: system-gateway
cloud:
gateway:
globalcors:
cors-configurations:
'[/**]': # 匹配所有請求
allowedOrigins: "*" #跨域處理 允許所有的域
allowedMethods: # 支持的方法
- GET
- POST
- PUT
- DELETE
當然也可以自己利用Gateway的攔截器來手動添加相應(yīng)的頭信息
default-filters:
- AddResponseHeader=Access-Control-Allow-Credentials,true
- AddResponseHeader=Access-Control-Allow-Headers,access-control-allow-origin
- AddResponseHeader=Access-Control-Allow-Methods,GET
- AddResponseHeader=Access-Control-Allow-Origin,*
- AddResponseHeader=Access-Control-Allow-Age,3600
3.3 在Nginx中解決
location /example {
if ($request_method = 'OPTIONS') {
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Max-Age 1728000;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
add_header Access-Control-Allow-Headers 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
add_header Content-Type' 'text/plain; charset=utf-8';
add_header Content-Length 0 ;
return 204;
}
+ if ($http_origin ~* (https?://(.+\.)?(example\.com$))) {
+ add_header Access-Control-Allow-Origin $http_origin;
+ add_header Access-Control-Allow-Credentials true;
+ add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
+ add_header Access-Control-Expose-Headers Content-Length,Content-Range;
+ }
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://127.0.0.1:8080/;
}
解釋:
if ($request_method = 'OPTIONS') {...} 當請求方法為 OPTIONS 時:
- 添加允許源 Access-Control-Allow-Origin 為 * (可根據(jù)業(yè)務(wù)需要更改)
- 添加緩存時長 Access-Control-Max-Age,當下次請求時,無需再發(fā)送 OPTIONS 請求
- 添加允許的方法,允許的首部
- 添加一個內(nèi)容長度為0,類型為 text/plain; charset=utf-8 , 返回狀態(tài)碼為 204 的首部
if ($http_origin ~* (https?://(.+\.)?(example\.com$))) {...}, 當 origin 為合法域名(可根據(jù)業(yè)務(wù)調(diào)整或去除合法域名驗證)時:
- 添加允許源Access-Control-Allow-Origin為 $http_origin (可根據(jù)業(yè)務(wù)需要更改)
- 添加允許認證Access-Control-Allow-Credentials為 true ,允許接收客戶端 Cookie(可根據(jù)業(yè)務(wù)需要更改。 但要注意,當設(shè)置為true時,Access-Control-Allow-Origin 不允許設(shè)置為 *)
- 添加允許的方法,暴露的首部
至此,完成跨域請求正確響應(yīng)。
以上,是對跨域請求在Web Server的解決方案,主要是通過響應(yīng) OPTIONS 方法和添加允許源來解決。希望能給大家一個參考,也希望大家多多支持腳本之家
相關(guān)文章
詳解如何用SpringBoot 2.3.0.M1創(chuàng)建Docker映像
這篇文章主要介紹了詳解如何用SpringBoot 2.3.0.M1創(chuàng)建Docker映像,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2020-05-05
Java實現(xiàn)跳轉(zhuǎn)到指定頁面的方法小結(jié)
在Java中,實現(xiàn)頁面跳轉(zhuǎn)主要涉及到Web開發(fā),而這通常通過使用Java的Web框架(如Servlet、Spring MVC)來完成,下面講解一下如何在不同的Java Web框架中實現(xiàn)頁面跳轉(zhuǎn),文中有詳細的代碼示例供大家參考,需要的朋友可以參考下2024-05-05
解決mybatis竟然報Invalid value for getInt()的問題
使用mybatis遇到一個非常奇葩的問題,總是報Invalid value for getInt()的問題,怎么解決呢?下面小編通過場景分析給大家代來了mybatis報Invalid value for getInt()的解決方法,感興趣的朋友參考下吧2021-10-10
redis?redisTemplate數(shù)據(jù)類型基礎(chǔ)操作
這篇文章主要介紹了redis?redisTemplate數(shù)據(jù)類型基礎(chǔ)操作,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-06-06
SpringSecurity+OAuth2.0?搭建認證中心和資源服務(wù)中心流程分析
OAuth?2.0?主要用于在互聯(lián)網(wǎng)上安全地委托授權(quán),廣泛應(yīng)用于身份驗證和授權(quán)場景,這篇文章介紹SpringSecurity+OAuth2.0?搭建認證中心和資源服務(wù)中心,感興趣的朋友一起看看吧2024-01-01
Java調(diào)用shell腳本解決傳參和權(quán)限問題的方法
今天小編就為大家分享一篇關(guān)于Java調(diào)用shell腳本解決傳參和權(quán)限問題的方法,小編覺得內(nèi)容挺不錯的,現(xiàn)在分享給大家,具有很好的參考價值,需要的朋友一起跟隨小編來看看吧2019-03-03

