跨域（HTTP訪問控制（CORS））

跨域：指的是瀏覽器不能執行其他網站的腳本。它是由瀏覽器的同源策略造成的，是瀏覽器對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.

HTTP訪問控制（CORS）

跨域資源共享(CORS) 是一種機制，它使用額外的 HTTP 頭來告訴瀏覽器  讓運行在一個 origin (domain) 上的Web應用被准許訪問來自不同源服務器上的指定的資源。當一個資源從與該資源本身所在的服務器不同的域、協議或端口請求一個資源時，資源會發起一個跨域 HTTP 請求。

簡單請求

某些請求不會觸發 CORS 預檢請求。本文稱這樣的請求爲“簡單請求”，請注意，該術語並不屬於 Fetch （其中定義了 CORS）規範。若請求滿足所有下述條件，則該請求可視爲“簡單請求”：

• 使用下列方法之一：
  • GET
  • HEAD
  • POST
• 除了被用戶代理自動設置的首部字段（例如 Connection ，User-Agent）和在 Fetch 規範中定義爲 禁用首部名稱 的其他首部，允許人爲設置的字段爲 Fetch 規範定義的 對 CORS 安全的首部字段集合。該集合爲：
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type （需要注意額外的限制）
  • DPR
  • Downlink
  • Save-Data
  • Viewport-Width
  • Width
• 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.

可能同時配置了多個跨域，關掉其他的配置

注意：

參考：HTTP訪問控制（CORS）