跨域問題__CORS解決方案

跨域問題

跨域：浏覽器對于javascript的同源政策的限制 。

以下情況都屬于跨域：

跨域原因說明	示例
域名不同	www.jd.com 與 www.taobao.com
域名相同，端口不同	www.jd.com:8080 與 www.jd.com:8081
二級域名不同	item.jd.com 與 miaosha.jd.com

如果域名和端口都相同，但是請求路徑不同，不屬于跨域，如：

www.jd.com/item

www.jd.com/goods

http和https也屬于跨域

為什麼有跨域問題？

跨域不一定都會有跨域問題。

因為跨域問題是浏覽器對于ajax請求的一種安全限制：一個頁面發起的ajax請求，隻能是與目前頁域名相同的路徑，這能有效的阻止跨站攻擊。

是以：跨域問題 是針對ajax的一種限制。

但是這卻給我們的開發帶來了不便，而且在實際生産環境中，肯定會有很多台伺服器之間互動，位址和端口都可能不同，怎麼辦？

解決跨域問題的方案

目前比較常用的跨域解決方案有3種：

• Jsonp

  最早的解決方案，利用script标簽可以跨域的原理實作。

  限制：

  • 需要服務的支援
  • 隻能發起GET請求

• nginx反向代理

  思路是：利用nginx把跨域反向代理為不跨域，支援各種請求方式

  缺點：需要在nginx進行額外配置，語義不清晰

• CORS

  規範化的跨域請求解決方案，安全可靠。

  優勢：

  • 在服務端進行控制是否允許跨域，可自定義規則
  • 支援各種請求方式
  缺點：
  • 會産生額外的請求

什麼是cors

CORS是一個W3C标準，全稱是"跨域資源共享"（Cross-origin resource sharing）。

它允許浏覽器向跨源伺服器，發出[

XMLHttpRequest

請求，進而克服了AJAX隻能[同源)使用的限制。

CORS需要浏覽器和伺服器同時支援。目前，所有浏覽器都支援該功能，IE浏覽器不能低于IE10。

• 浏覽器端：

  目前，所有浏覽器都支援該功能（IE10以下不行）。整個CORS通信過程，都是浏覽器自動完成，不需要使用者參與。

• 服務端：

  CORS通信與AJAX沒有任何差别，是以你不需要改變以前的業務邏輯。隻不過，浏覽器會在請求中攜帶一些頭資訊，我們需要以此判斷是否允許其跨域，然後在響應頭中加入一些資訊即可。這一般通過過濾器完成即可。

原理有點複雜

預檢請求

跨域請求會在正式通信之前，增加一次HTTP查詢請求，稱為"預檢"請求（preflight）。

浏覽器先詢問伺服器，目前網頁所在的域名是否在伺服器的許可名單之中，以及可以使用哪些HTTP動詞和頭資訊字段。隻有得到肯定答複，浏覽器才會發出正式的

XMLHttpRequest

請求，否則就報錯。

一個“預檢”請求的樣闆：

OPTIONS /cors HTTP/1.1
Origin: http://localhost:1000
Access-Control-Request-Method: GET
Access-Control-Request-Headers: X-Custom-Header
User-Agent: Mozilla/5.0...
           

• Origin：會指出目前請求屬于哪個域（協定+域名+端口）。服務會根據這個值決定是否允許其跨域。
• Access-Control-Request-Method：接下來會用到的請求方式，比如PUT
• Access-Control-Request-Headers：會額外用到的頭資訊

預檢請求的響應

服務的收到預檢請求，如果許可跨域，會發出響應：

HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://miaosha.jd.com
Access-Control-Allow-Credentials: true
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Max-Age: 1728000
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain
           

如果伺服器允許跨域，需要在傳回的響應頭中攜帶下面資訊：

• Access-Control-Allow-Origin：可接受的域，是一個具體域名或者*（代表任意域名）
• Access-Control-Allow-Credentials：是否允許攜帶cookie，預設情況下，cors不會攜帶cookie，除非這個值是true
• Access-Control-Allow-Methods：允許通路的方式
• Access-Control-Allow-Headers：允許攜帶的頭
• Access-Control-Max-Age：本次許可的有效時長，機關是秒，過期之前的ajax請求就無需再次進行預檢了

有關cookie：

要想操作cookie，需要滿足3個條件：

• 服務的響應頭中需要攜帶Access-Control-Allow-Credentials并且為true。
• 浏覽器發起ajax需要指定withCredentials 為true
• 響應頭中的Access-Control-Allow-Origin一定不能為*，必須是指定的域名

實作非常簡單

雖然原理比較複雜，但是前面說過：

• 浏覽器端都有浏覽器自動完成，我們無需操心
• 服務端可以通過攔截器統一實作，不必每次都去進行跨域判定的編寫。

事實上，Spring已經幫我們寫好了CORS的跨域過濾器，内部已經實作了剛才所講的判定邏輯。

spring-webmvc：CorsFilter
spring-webflux：CorsWebFilter
           

springcloud-gateway內建的是webflux，是以這裡使用的是CorsWebFilter

在服務中編寫一個配置類，并且注冊CorsWebFilter：

@Configuration
public class CorsConfig {

    @Bean
    public CorsWebFilter corsWebFilter() {

        // 初始化CORS配置對象
        CorsConfiguration config = new CorsConfiguration();
        // 允許的域,不要寫*，否則cookie就無法使用了
        config.addAllowedOrigin("http://manager.gmall.com");
        config.addAllowedOrigin("http://www.gmall.com");
        // 允許的頭資訊
        config.addAllowedHeader("*");
        // 允許的請求方式
        config.addAllowedMethod("*");
        // 是否允許攜帶Cookie資訊
        config.setAllowCredentials(true);

        // 添加映射路徑，我們攔截一切請求
        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();
        corsConfigurationSource.registerCorsConfiguration("/**", config);

        return new CorsWebFilter(corsConfigurationSource);
    }
}