阿里雲企業帳號開戶 阿里雲CDN跨域資源共享CORS配置

引言：為什麼同一套代碼在本機可用、上線就跨域失敗

很多人做跨域時，第一反應是「把前端的請求改一下」「後端加個回應頭」。可真實世界裡，常常不是那麼簡單。你可能已經在源站加了 CORS，但瀏覽器仍報錯；你明明看到 CDN 回了正確的頭，卻仍然被攔截；甚至出現某些接口突然間偶發失敗，刷新又好了。這些問題的根源通常不在「代碼」，而在「請求鏈路」與「回應頭是否被正確地放進每一層」：瀏覽器本身、CDN 邏輯、源站回應、以及緩存策略共同決定了最終是否能跨域。

本文聚焦阿里雲 CDN 跨域資源共享的 CORS 配置。目標不是泛泛而談，而是用一套可落地的思路：先理解瀏覽器怎麼判斷跨域是否通過，再確認 CDN 與源站在流程中各自負責什麼，最後給出常見場景的配置建議與排查方法。你照著做，大概率就能把問題釘死，而不是靠運氣反覆試。

第一章：跨域失敗的核心原理——瀏覽器到底在看什麼

同源策略（Same-Origin Policy）限制的是「讀取」而不是「發送」。也就是說：瀏覽器允許你發送跨域請求，但是否能把響應內容交給前端程式讀取，由瀏覽器來決定。CORS（Cross-Origin Resource Sharing）就是瀏覽器與服務端之間的協商機制：服務端在回應裡告訴瀏覽器「允許哪個來源讀取」。

需要抓住兩點：第一，CORS 不是由前端決定，而是由瀏覽器驗證回應頭；第二，回應頭必須在「實際被瀏覽器收到」的那次回應中正確存在。很多人以為在源站加了就一定行，但如果 CDN 沒把頭帶上、或緩存使用了另一個來源的回應，就仍可能失敗。

阿里雲企業帳號開戶 1.1 簡單請求 vs 預檢請求（OPTIONS）

瀏覽器會根據請求方法、請求頭與內容類型，決定是否要先做預檢（Preflight）。

• 簡單請求：滿足條件時，瀏覽器直接發送目標請求，然後檢查回應頭是否包含合規的 CORS 標頭。
• 預檢請求：如果包含非簡單方法（例如 PUT、DELETE 等）、或包含特定自訂請求頭、或 Content-Type 不在允許列表中，瀏覽器就會先發送 OPTIONS 請求，詢問服務端是否允許。只有預檢通過後，才會發送真正的請求。

這意味著你不能只在真正的 GET/POST 回應中設置 CORS。當瀏覽器發出 OPTIONS 之前，CDN 或源站必須也能正確回應 CORS 頭。否則，你會看到「預檢失敗」或「被攔截」的錯誤。

1.2 重要的 CORS 回應頭（Access-Control-Allow-*）

最常用的幾個頭如下：

• Access-Control-Allow-Origin：允許的來源。要麼是指定域名，要麼用通配符 *。但注意：當你要允許攜帶憑證（Credentials）時，不能用 *。
• 阿里雲企業帳號開戶 Access-Control-Allow-Methods：允許的方法集合（用於預檢回應）。
• Access-Control-Allow-Headers：允許的請求頭集合（用於預檢回應）。
• Access-Control-Allow-Credentials：是否允許瀏覽器攜帶 Cookie / HTTP 認證信息。
• 阿里雲企業帳號開戶 Vary：讓緩存正確區分不同 Origin 的回應（尤其是 CDN）。

其中，Vary: Origin 對跨域與 CDN 來說很關鍵。沒有它，CDN 可能把同一個資源的回應快取起來，導致另一個來源拿到錯誤的 Allow-Origin 值，瀏覽器自然就拒絕讀取。

第二章：阿里雲 CDN 跨域配置的思路——不要把工作全押在源站

在阿里雲 CDN 的典型架構中：瀏覽器訪問 CDN 域名（例如 cdn.example.com），CDN 會根據命中規則回源到你的源站（例如 api.example.com 或 storage.example.com），並把回應轉給瀏覽器。

跨域的本質要求是：瀏覽器收到的回應裡必須包含合規的 CORS 標頭。那麼，這些標頭到底由誰來產生？常見做法有兩種：

• 源站產生：源站服務端在每個回應中設置 CORS 標頭。
• CDN 產生/注入：在 CDN 層對回應添加 CORS 標頭（包括對 OPTIONS 的處理）。

實戰中，你可能需要兩者結合：例如源站負責業務邏輯與動態內容，CDN 負責對所有靜態資源統一注入標頭，確保跨域穩定。同時，如果你使用了緩存（哪怕是默認的），就更需要考慮 CDN 是否會緩存不同 Origin 的回應。

因此，本文的核心主線是「配置要對齊瀏覽器看到的回應」。在排查時，我們也會用這個思路倒推。

第三章：配置前的準備清單——先確定你屬於哪一種跨域場景

在開始改配置之前，建議先回答三個問題。你回答清楚，後面設置 Access-Control-Allow-* 會更穩。

3.1 你要允許哪些來源（Origin）？

如果你只允許單一前端域名（例如 https://www.example.com），那最安全也是最簡單：Allow-Origin 設成這個域名即可。

如果你允許多個固定域名，通常也可以在服務端/邏輯層動態回傳對應 Origin；如果你允許任意域名才考慮 *，但要注意是否使用 Credentials。

3.2 你是否需要攜帶憑證（Cookie/Authorization）？

如果你的跨域請求需要攜帶 Cookie（例如前端已登入，後端也用 Cookie 認證），你就必須：

• 前端請求帶上 credentials（如 fetch 的 credentials: 'include' 或 axios 的 withCredentials: true）。
• 阿里雲企業帳號開戶 回應頭要包含 Access-Control-Allow-Credentials: true。
• Access-Control-Allow-Origin 不能是 *，必須精確到具體域名。

如果你不需要憑證，那通常把允許頭做得更寬鬆也能達到需求。

3.3 你的請求是否會觸發預檢 OPTIONS？

若你使用了自訂 header（如 X-Requested-With、Authorization、X-Token 等），大機率會觸發預檢。你必須確認：OPTIONS 請求能被 CDN 正確處理，並回應合規的 CORS 頭。

第四章：基本場景示範——公開靜態資源的跨域讀取（無憑證）

先從最常見、也相對簡單的場景說起：你把圖片、前端資源（JS/CSS/字體）存放在 CDN 上，允許不同域名的站點直接讀取。此時通常不需要 Cookie，請求方法多半是 GET。

4.1 目標效果

例如，前端頁面部署在 https://shop.example.com，需要載入 https://cdn.example.com 下的資源。當瀏覽器讀取 CDN 資源時，需要回應頭：

• Access-Control-Allow-Origin: https://shop.example.com（或視需求允許 *）
• 必要時帶 Vary: Origin

4.2 CDN 注入 Allow-Origin 的做法

阿里雲企業帳號開戶 在阿里雲 CDN 的配置項（名稱可能在不同控制台版本略有差異，但思路一致）中，你需要做到兩件事：

1. 對「返回給瀏覽器的響應」添加 Access-Control-Allow-Origin。
2. 如果你用允許多個來源，務必加入 Vary: Origin，避免緩存串源。

例如你決定只允許 https://shop.example.com，那麼 CDN 注入固定值即可：

• Access-Control-Allow-Origin 設為 https://shop.example.com
• Vary 設為 Origin

如果你允許任意來源，則可以設 Access-Control-Allow-Origin: *；但一旦你涉及憑證，* 就會直接踩雷。

4.3 常見錯誤：只在源站設了，CDN 沒帶出去

你可能在源站的回應裡看到有 CORS 頭，但瀏覽器還是報錯。這種情況通常是：

• CDN 沒有把源站的 CORS 頭轉發/保留（某些策略或規則會覆蓋）。
• CDN 自己做了「回應重寫」，導致你以為存在的頭實際沒到達瀏覽器。
• 緩存使用了其他 Origin 的回應，Vary 沒正確設置。

排查時就要回到「瀏覽器收到的是什麼」而不是「源站發出的是什麼」。用開發者工具查看 Network 的 Response Headers，是最快的方式。

第五章：帶攜帶憑證的跨域（Cookie/Authorization）——最容易踩坑的一類

當你跨域請求要依賴 Cookie 或 Authorization 時，配置難度會明顯提升，因為 CORS 的規則更嚴格。

5.1 必要條件

假設你的前端從 https://shop.example.com 發送請求到 https://api.example.com（通過 CDN 也可以）。你必須同時滿足：

• 前端請求：credentials 設為 include。
• 回應頭：Access-Control-Allow-Credentials: true。
• 回應頭：Access-Control-Allow-Origin 必須是具體來源（不能為 *）。
• 必要時回應頭中還要保證 Vary: Origin，避免 CDN 把不同來源的回應混用。

5.2 CDN 層如何設置 Allow-Origin 與 Vary

如果你只允許單一域名，那你可以把 Allow-Origin 固定成該域名，簡化問題。但如果你希望多個前端域名都能訪問，同時又要允許憑證，則不能使用 *，而需要對 Origin 做精確匹配。

通常可行的策略是：在 CDN 或源站根據請求中的 Origin 值回填允許來源。但在純 CDN 注入固定值的情況下，你就需要事先把允許域名固定好。若允許域名集合很大，建議在源站用邏輯動態回填。

不論採用哪種方式，務必確保回應帶有：

• Vary: Origin

沒有它，CDN 的緩存可能把「Origin=A 的回應」拿給「Origin=B 的請求」使用，導致瀏覽器拒絕。

第六章：預檢 OPTIONS 的處理——很多人卡在這一步

當你的跨域請求觸發預檢時，瀏覽器會先發 OPTIONS。只要 OPTIONS 的回應沒有符合規範的 CORS 頭，真正的請求就不會被發出（或者發出後也可能被攔截）。

6.1 預檢回應應該返回什麼

OPTIONS 回應通常需要包含：

• Access-Control-Allow-Origin
• Access-Control-Allow-Methods（例如 GET, POST, PUT, DELETE 等）
• Access-Control-Allow-Headers（例如 Content-Type, Authorization, X-Token 等）
• Access-Control-Allow-Credentials（如果你要帶憑證）
• 必要時：Access-Control-Max-Age（告訴瀏覽器預檢可緩存多久）

6.2 CDN 對 OPTIONS 的策略：回應或放行給源站

在阿里雲 CDN 的配置上，你通常有兩類選擇：

• 讓 CDN 直接對 OPTIONS 回應合規頭：好處是性能穩定，且不依賴源站對 OPTIONS 的處理能力。
• 將 OPTIONS 回源給源站：適合源站可以統一處理並動態回填允許來源。

如果你已經在源站處理了 OPTIONS，理論上回源就可以；但很多時候源站未必正確處理預檢，或 OPTIONS 在某些路由/安全策略下被擋掉。此時 CDN 直接處理往往更穩。

6.3 常見錯誤：OPTIONS 200 但仍然跨域失敗

一個常見誤區是：「我看 OPTIONS 回了 200，所以應該沒問題。」可實際上，瀏覽器檢查的是回應頭是否存在且匹配請求。即使狀態碼是 200，只要缺少：

• Access-Control-Allow-Origin
• 或 Allow-Headers/Allow-Methods 不包含你實際請求的內容

也會失敗。所以要同時檢查 Response Headers。

第七章：緩存與 CORS 的交集——Vary 不設，遲早出事

CDN 最強的一點是緩存，但跨域里緩存也是最容易讓你「以為配置正確但實際失敗」的原因。

7.1 為什麼需要 Vary: Origin

如果你允許多個 Origin，而你又讓 CDN 緩存回應，那麼 CDN 在同一個 URL 上可能緩存多種 Allow-Origin 值。若缺少 Vary: Origin，CDN 可能把某個來源對應的回應當成通用回應，導致別的來源收到錯誤的 Allow-Origin。

瀏覽器層面的表現是：有的域名偶發成功，有的域名永遠失敗，刷新後又變，或者在切換域名測試時表現不一致。

7.2 建議：對包含 CORS 允許來源的資源設置 Vary

你的資源回應（尤其是帶 Allow-Origin 的回應）建議帶上：

• Vary: Origin

如果你還會根據是否攜帶憑證或其他條件差異化回應，也要確保緩存策略不會把不相容的回應混用。實務上，最直接的方式是確保 CORS 回應頭足夠精準，並把 Vary 設置到位。

第八章：實戰排查流程——用開發者工具把問題定位到「哪一層沒做對」

當你遇到跨域問題，不要憑感覺改一堆。用以下流程能很快縮小範圍。

8.1 第一步：看瀏覽器報錯的類型

常見錯誤大致分三類：

• 阿里雲企業帳號開戶 被攔截：瀏覽器在驗證回應頭時失敗（通常是缺少/不匹配 Allow-Origin、Allow-Headers、Allow-Methods）。
• 預檢失敗：OPTIONS 的回應不符合規範。
• 網路錯誤：可能是 404/403 或被安全策略擋掉，瀏覽器拿不到有效回應。

錯誤類型能告訴你該先查 OPTIONS 還是先查實際資源回應。

8.2 第二步：Network 裡逐個請求檢查 Response Headers

打開開發者工具，找到：

• OPTIONS 請求（如果存在）
• 阿里雲企業帳號開戶 真正的 GET/POST 請求

然後確認回應頭中是否包含你期望的 CORS 標頭，特別是：

• Access-Control-Allow-Origin 是否存在、是否等於你實際頁面的 Origin
• 是否缺少 Vary: Origin（多來源時尤其要查）
• 是否需要 Allow-Credentials，但回應是否提供並且前端 credentials 是否設置
• 預檢時 Allow-Headers/Allow-Methods 是否包含實際請求

8.3 第三步：同一 URL 用不同 Origin 測試，看是否被緩存污染

如果你有兩個前端域名 A 和 B，分別測試同一資源 URL。若：

• A 成功，B 失敗
• 刷新或過一段時間又可能反轉

阿里雲企業帳號開戶 這高度暗示 CDN 緩存與 Vary 設置不當。解法通常是確保回應包含 Vary: Origin，或調整 CDN 緩存鍵（視控制台能力）以包含 Origin 相關因素。

第九章：常見需求對應的配置建議（濃縮成可照做的清單）

下面用幾個最常見的需求做對應。你可以對照你的場景選擇配置方向。

9.1 只允許單一前端域名讀取 CDN 靜態資源（無憑證）

• Access-Control-Allow-Origin：設為你的前端域名（精確值）
• 不需要 Access-Control-Allow-Credentials（可不設或留空）
• 建議設 Vary: Origin（雖然單一域名風險低，但養成習慣更省事）

9.2 允許多個前端域名讀取 CDN 靜態資源（無憑證）

• 如果可控來源有限，推薦精確 Allow-Origin（不要用 * 也可以，但看你的實現方式）
• 必須設 Vary: Origin
• 避免 CDN 緩存串源

9.3 允許跨域 API 請求並攜帶 Cookie（Credentials = true）

• 前端請求帶 credentials
• 回應：Access-Control-Allow-Credentials: true
• Access-Control-Allow-Origin：不能用 *
• 多 Origin 時：回應需動態匹配 Origin，並設 Vary: Origin
• OPTIONS 也必須正確回應 Allow-Methods、Allow-Headers、Allow-Origin

9.4 預檢大量出現，性能壓力大

• 考慮回應 Access-Control-Max-Age（讓預檢緩存更久）
• 減少不必要的自訂 header 或不必要的非簡單請求頭
• 確保 OPTIONS 在 CDN 或源站都能快速返回合規頭

第十章：把配置做對之後，還要避免「可用但不穩」

很多配置能「看起來」可用，但其實藏著不穩定因子。請你在上線前做幾個小測試：

• 多域名測試：至少測兩個不同 Origin。
• 檢查 OPTIONS：確認瀏覽器實際是否發出預檢，以及回應頭是否匹配。
• 阿里雲企業帳號開戶 觀察緩存行為：如果你改了 CORS 頭，確保 CDN 有正確更新（必要時做清除緩存）。
• 觀察回源差異：部分請求命中/回源的路徑不同，回應頭是否一致要確認。

當這些都做完，你的跨域就不只是「偶爾能用」，而是「可持續運行」。

結語：CORS不是把頭加上去就結束，而是確保每次回應都能被瀏覽器認可

阿里雲 CDN 跨域資源共享的 CORS 配置，真正的難點不在於記憶某幾個標頭名字，而在於理解鏈路：瀏覽器如何判斷允許、CDN 如何緩存與轉發、源站如何回應、以及預檢 OPTIONS 是否被正確處理。只要你把排查重心放在「瀏覽器收到的 Response Headers」上，再結合 Vary: Origin 這個常被忽略的要點，問題就會變得可控。

下次你再遇到跨域錯誤，別急著猜。先看 OPTIONS，再看 Allow-Origin 是否精確，再看是否 Vary 失效導致緩存串源。把這三步走完，基本就能把 CORS 的不確定性壓到最低。