Nginx跨域解決方案

跨域限制訪問，即爲瀏覽器禁止訪問其他網站的資源，是瀏覽器的限制。如果缺少了同源策略，網頁很容易受到XSS、CSFR等攻擊。

同源策略是Web應用程序安全性模型中的重要概念。根據該策略，Web瀏覽器允許第一個網頁中包含的腳本訪問第二個網頁中的數據，但前提是兩個網頁具有相同的來源。來源由URI，主機名(hostname) 和端口號(port) 的組合定義。此策略可防止一個頁面上的惡意腳本通過該頁面的DOM(Document Object Model)獲得對另一網頁上敏感數據的訪問。

CORS

跨域資源共享(CORS) 是一種機制，它使用額外的 HTTP 頭來告訴瀏覽器，它允許 Web 應用服務器進行跨域訪問控制，從而使跨域數據傳輸得以安全進行。

跨域資源共享標準新增了一組 HTTP 首部字段，允許服務器聲明哪些源站通過瀏覽器有權限訪問哪些資源。另外，規範要求，對那些可能對服務器數據產生副作用的 HTTP 請求方法（特別是GET以外的 HTTP 請求，或者搭配某些 MIME 類型的POST請求），瀏覽器必須首先使用OPTIONS方法發起一個預檢請求（preflight request），從而獲知服務端是否允許該跨域請求。服務器確認允許之後，才發起實際的 HTTP 請求。在預檢請求的返回中，服務器端也可以通知客戶端，是否需要攜帶身份憑證（包括Cookies和 HTTP 認證相關數據）。

簡單請求

某些請求不會觸發 CORS 預檢請求，可稱這樣的請求爲“簡單請求”。

請注意，該術語並不屬於 Fetch （其中定義了 CORS）規範。

• 使用下列方法之一：GET、HEAD、POST
• Content-Type的值僅限於下列三者之一：text/plain、multipart/form-data、application/x-www-form-urlencoded
• …

所有簡單請求見MDN 簡單請求

預檢請求（preflight request）

與前述簡單請求不同，需預檢的請求要求必須首先使用 OPTIONS 方法發起一個預檢請求到服務器，以獲知服務器是否允許該實際請求。"預檢請求“的使用，可以避免跨域請求對服務器的用戶數據產生未預期的影響。

對於附帶身份憑證的請求，服務器不得設置Access-Control-Allow-Origin的值爲“*”，需設置爲具體的域名，否則請求會失敗。

Nginx跨域配置

NGINX是一個免費的，開源的高性能HTTP服務器和反向代理，以及IMAP / POP3代理服務器。NGINX以其高性能，穩定性，豐富的功能集，簡單的配置和低資源消耗而聞名。

通常在nginx下設置通用配置，以解決域名下的跨域問題

簡單請求跨域配置

Access-Control-Allow-Origin: *.test.com
Access-Control-Allow-Credentials: true

預檢請求過程

當需要支持跨域的請求不是簡單請求時，需特殊處理預檢請求所發起的OPTIONS請求

set $cors '';
if ($http_origin ~* 'https?://(localhost|www\.example\.com|m\.example\.com)') {
        set $cors 'true';
}

if ($cors = 'true') {
        add_header 'Access-Control-Allow-Origin' "$http_origin";
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Mx-ReqToken,X-Requested-With';
}

if ($request_method = 'OPTIONS') {
        return 204;
}

下圖爲，以真實請求的HTTP方法及請求首部字段發起對應的預檢請求

---

參考資料：

1. HTTP訪問控制（CORS）