Spring Boot + Spring Cloud 實現權限管理系統后端篇（十二）：解決跨域問題

本文轉載自查看原文 2018-09-15 13:11 2028 Spring Boot/ 實戰演練/ Spring boot

什么是跨域？

同源策略是瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方資源。同源策略是瀏覽器安全的基石。

如果一個請求地址里面的協議、域名和端口號都相同，就屬於同源。

舉個栗子

判斷下面URL是否和 http://www.a.com/a/a.html 同源

http://www.a.com/b/b.html 同源
http://www.b.com/a/a.html 不同源，域名不相同
https://www.a.com/b/b.html 不同源，協議不相同
http://www.a.com:8080/b/b.html 不同源，端口號不相同

依據瀏覽器同源策略，非同源腳本不可操作其他源下面的對象。想要操作其他源下的對象就需要跨域。

綜上所述，在同源策略的限制下，非同源的網站之間不能發送 AJAX 請求。如有需要，可通過降域或其他技術實現。

CORS 技術

為了解決瀏覽器跨域問題，W3C 提出了跨源資源共享方案，即 CORS(Cross-Origin Resource Sharing)。

CORS 可以在不破壞即有規則的情況下，通過后端服務器實現 CORS 接口，就可以實現跨域通信。

CORS 將請求分為兩類：簡單請求和非簡單請求，分別對跨域通信提供了支持。

1、簡單請求

在CORS出現前，發送HTTP請求時在頭信息中不能包含任何自定義字段，且 HTTP 頭信息不超過以下幾個字段：

Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type （僅限於 [application/x-www-form-urlencoded 、multipart/form-data、text/plain ] 類型）

一個簡單請求的例子：

GET /test HTTP/1.1
Accept: */*
Accept-Encoding: gzip, deflate, sdch, br
Origin: http://www.test.com
Host: www.test.com

對於簡單請求，CORS的策略是請求時在請求頭中增加一個Origin字段，服務器收到請求后，根據該字段判斷是否允許該請求訪問。

如果允許，則在 HTTP 頭信息中添加 Access-Control-Allow-Origin 字段，並返回正確的結果；
如果不允許，則不在 HTTP 頭信息中添加 Access-Control-Allow-Origin 字段。

除了上面提到的 Access-Control-Allow-Origin ，還有幾個字段用於描述 CORS 返回結果：

Access-Control-Allow-Credentials：可選，用戶是否可以發送、處理 cookie；
Access-Control-Expose-Headers：可選，可以讓用戶拿到的字段。有幾個字段無論設置與否都可以拿到的，包括：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma 。

2、非簡單請求

對於非簡單請求的跨源請求，瀏覽器會在真實請求發出前，增加一次OPTION請求，稱為預檢請求(preflight request)。預檢請求將真實請求的信息，包括請求方法、自定義頭字段、源信息添加到 HTTP 頭信息字段中，詢問服務器是否允許這樣的操作。

例如一個GET請求：

OPTIONS /test HTTP/1.1
Origin: http://www.test.com
Access-Control-Request-Method: GET
Access-Control-Request-Headers: X-Custom-Header
Host: www.test.com

與 CORS 相關的字段有：

請求使用的 HTTP 方法 Access-Control-Request-Method
請求中包含的自定義頭字段 Access-Control-Request-Headers

服務器收到請求時，需要分別對 Origin、Access-Control-Request-Method、Access-Control-Request-Headers 進行驗證，驗證通過后，會在返回 HTTP頭信息中添加：

Access-Control-Allow-Origin: http://www.test.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000

他們的含義分別是：

Access-Control-Allow-Methods: 真實請求允許的方法
Access-Control-Allow-Headers: 服務器允許使用的字段
Access-Control-Allow-Credentials: 是否允許用戶發送、處理 cookie
Access-Control-Max-Age: 預檢請求的有效期，單位為秒。有效期內，不會重復發送預檢請求

當預檢請求通過后，瀏覽器才會發送真實請求到服務器。這樣就實現了跨域資源的請求訪問。

項目添加跨域支持

1.添加配置類

在 kitty-boot 下添加跨域配置，如下圖所示。

CorsConfig.java

package com.louis.kitty.boot.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")    // 允許跨域訪問的路徑
        .allowedOrigins("*")    // 允許跨域訪問的源
        .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")    // 允許請求方法
        .maxAge(168000)    // 預檢間隔時間
        .allowedHeaders("*")  // 允許頭部設置
        .allowCredentials(true);    // 是否發送cookie
    }
}

2.修改過濾器

2.1 Shiro 導致的跨域問題

按照正常邏輯，添加了上面的跨域配置類就可以實現跨域支持了。然而，我們使用了 Shiro 就不一樣了。我們上面講到，對於非簡單的跨域請求，會事先發起一個OPTION類型的預檢請求，只有預檢請求成功才會發起真正的請求，而這個預檢請求是不帶 token 的，這就意味着這個預檢請求會被 shiro 過濾器攔截並在 token 校驗失敗之后返回失敗信息，從而不會再發起真正的請求。