前後端分離模大勢所趨,跨域問題更是老生常談。
問題背景:
瀏覽器最基本的安全規範-同源策略。所謂同源是指域名、協議、端口相同。不同源的瀏覽器腳本(javascript、ActionScript、canvas)在沒有明確授權的情況下,不能讀寫對方的資源。
CORS就是w3c和瀏覽器廠商爲解決跨域資源共享問題而推出的標準方案:它允許瀏覽器向跨源服務器發出腳本請求,CORS需要瀏覽器和服務器同時支持,它的通信過程都是瀏覽器自動完成的,不需要用戶參與。
瀏覽機器一旦發現跨域,就會自動添加一些附加的頭信息,有時還會多出一次附加的請求,但用戶不會察覺,服務器響應特定標頭Access-Control-,體現跨源訪問的授權。
今天我主要想要聊一聊CORS中的預檢請求
當前端使用腳本請求一個跨域資源時,如果是非簡單請求(下文會解釋),瀏覽器會自動幫你先發出一個OPTIONS
查詢請求,稱爲預檢(cors-preflight-request
),作用是詢問服務器,當前網頁所在的域名是否在服務器的許可名單之中,以及可以使用那些HTTP動詞和頭信息字段。 只有得到肯定答覆,瀏覽器纔會發生正式的XHR請求。
該請求header中會包含以下兩個字段:
- Access-Control-Request-Method: 該字段的值對應當前請求類型,例如 GET、POST、PUT等等。瀏覽器會自動處理。
- Access-Control-Request-Headers: 該字段的值對應當前請求可能會攜帶的額外的自定義header字段名,多個字段用逗號分割。瀏覽器會自動處理,將請求中非簡單的header字段全部列出來,例如標識請求流水的x-request-id,用於Auth鑑權的Authorization 字段。
對於 OPTIONS 請求,按照規範實現的服務端會響應一組HTTP header,但不會返回任何實體內容。如果服務端支持該跨域請求,建議返回 204狀態碼(返回200也可以);如果不支持,建議返回403狀態碼(返回404或其他錯誤狀態碼也可以)。
響應的header可以包含以下字段:
- Access-Control-Allow-Origin: 允許哪些域被允許跨域,例如 http://qq.com 或 https://qq.com,或者設置爲 * ,即允許所有域訪問
- Access-Control-Allow-Credentials: 是否攜帶票據訪問(對應fetch方法中credentials),當該值爲true時,Access-Control-Allow-Origin 不允許設置爲*
- Access-Control-Allow-Methods: 標識該資源支持哪些方法,例如:POST, GET, PUT, DELETE
- Access-Control-Allow-Headers: 標識允許哪些額外的自定義 header 字段和非簡單值的字段
- Access-Control-Max-Age: 表示可以緩存Access-Control-Allow-Methods和Access-Control-Allow-Headers提供的信息多長時間,單位秒,由服務端和瀏覽器默認值共同決定。
- Access-Control-Expose-Headers: 通過該字段指出哪些額外的 header 可以被支持。
由此可見,當觸發預檢時,一次AJAX請求會消耗掉兩個TTL,嚴重影響性能。
那麼如何節省掉 OPTIONS 請求來提升性能呢?從上文可以看出,有兩個方案:
- 發出簡單請求
只要同時滿足一下兩個條件,就屬於簡單請求
(1)使用下列方法之一:
- head
- get
- post
(2)請求的Heder是
- Accept
- Accept-Language
- Content-Language
- Content-Type: 只限於三個值:application/x-www-form-urlencoded、multipart/form-data、text/plain
不同時滿足上面的兩個條件,就屬於非簡單請求。
很明顯,我們常見的Post請求、媒體類型Content-Type=application/json也屬於非簡單請求,也會觸發預檢請求。如果不方便改造爲簡單請求,只有使用方案2了。
- 服務器端設置
Access-Control-Max-Age
字段
當第一次請求該URL時會發出OPTIONS
請求,瀏覽器會根據返回的Access-Control-Max-Age
字段緩存該請求的OPTIONS預檢請求
的響應結果。在緩存有效期內,該資源的請求(URL和header字段都相同的情況下)不會再觸發預檢。(chrome 打開控制檯可以看到,當服務器響應Access-Control-Max-Age
時只有第一次請求會有預檢,後面不會了。注意要開啓緩存,去掉disable cache
勾選)
但是要注意的是,該緩存只針對這一個請求 URL 和相同的 header,無法針對整個域或者模糊匹配URL做緩存。(當然也可以考慮封裝一下,固定一個接口地址,傳不同的body內容)。
下面是Abp vNext配置CROS的示例:
private void ConfigureCors(ServiceConfigurationContext context, IConfiguration configuration)
{
context.Services.AddCors(options =>
{
// 無阻塞跨域
options.AddPolicy(DefaultCorsPolicyName, builder =>
{
builder.SetIsOriginAllowed(_ => true)
.AllowCredentials()
.AllowAnyHeader()
.WithMethods(HttpMethods.Get, HttpMethods.Post, HttpMethods.Put, HttpMethods.Delete)
.SetPreflightMaxAge(TimeSpan.FromHours(24));
});
});
}