跨域:指的是瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的,是瀏覽器對javascript施加的安全限制。
同源策略:是指協議,域名,端口都要相同,其中有一個不同都會產生跨域;
Access to XMLHttpRequest at 'http://localhost:88/api/sys/login' from origin 'http://localhost:8001' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
跨域資源共享(CORS) 是一種機制,它使用額外的 HTTP 頭來告訴瀏覽器 讓運行在一個 origin (domain) 上的Web應用被准許訪問來自不同源服務器上的指定的資源。當一個資源從與該資源本身所在的服務器不同的域、協議或端口請求一個資源時,資源會發起一個跨域 HTTP 請求。
簡單請求
某些請求不會觸發 CORS 預檢請求。本文稱這樣的請求爲“簡單請求”,請注意,該術語並不屬於 Fetch (其中定義了 CORS)規範。若請求滿足所有下述條件,則該請求可視爲“簡單請求”:
- 使用下列方法之一:
- 除了被用戶代理自動設置的首部字段(例如
Connection
,User-Agent
)和在 Fetch 規範中定義爲 禁用首部名稱 的其他首部,允許人爲設置的字段爲 Fetch 規範定義的 對 CORS 安全的首部字段集合。該集合爲:Content-Type
的值僅限於下列三者之一:
text/plain
multipart/form-data
application/x-www-form-urlencoded
- 請求中的任意
XMLHttpRequestUpload
對象均沒有註冊任何事件監聽器;XMLHttpRequestUpload
對象可以使用XMLHttpRequest.upload
屬性訪問。- 請求中沒有使用
ReadableStream
對象。預檢請求
與前述簡單請求不同,“需預檢的請求”要求必須首先使用
OPTIONS
方法發起一個預檢請求到服務器,以獲知服務器是否允許該實際請求。"預檢請求“的使用,可以避免跨域請求對服務器的用戶數據產生未預期的影響。
在網關中進行配置
package com.zx.zxmall.gateway.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.reactive.CorsConfigurationSource;
import org.springframework.web.cors.reactive.CorsWebFilter;
import org.springframework.web.cors.reactive.UrlBasedCorsConfigurationSource;
import org.springframework.web.server.ServerWebExchange;
@Configuration
public class ZxmallCorsConfiguration {
@Bean
public CorsWebFilter corsWebFilter(){
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration corsConfiguration=new CorsConfiguration();
//1.配置跨域
//允許那些頭進行跨域
corsConfiguration.addAllowedHeader("*");
//所有請求方式
corsConfiguration.addAllowedMethod("*");
//任意請求來源
corsConfiguration.addAllowedOrigin("*");
//是否允許攜帶cookie
corsConfiguration.setAllowCredentials(true);
source.registerCorsConfiguration("/**",corsConfiguration);
return new CorsWebFilter(source);
}
}
預檢請求
實際請求
Access to XMLHttpRequest at 'http://localhost:88/api/sys/login' from origin 'http://localhost:8001' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header contains multiple values 'http://localhost:8001, http://localhost:8001', but only one is allowed.
可能同時配置了多個跨域,關掉其他的配置
注意: