目錄

一、什么是跨域問題？

二、跨域問題出現的原因

三、跨域的解決方案

四、結語

---

?

在 Web 開發的世界里，當我們嘗試通過 AJAX 等技術獲取不同源的資源時，常常會遇到 “跨域問題”。這不僅是前端開發者頻繁遭遇的技術障礙，也是保障 Web 安全的重要機制。本文將從跨域問題的定義、產生原因以及解決方案三個維度，深入剖析這一技術現象。

一、什么是跨域問題？

“跨域” 是指瀏覽器試圖從一個源（協議、域名、端口組合）發起 HTTP 請求，訪問另一個不同源的資源。在 Web 安全體系中，瀏覽器遵循同源策略（Same-Origin Policy），這是一種基礎安全機制，旨在防止惡意網站竊取用戶數據。例如，當一個網頁（Example Domain）通過 AJAX 請求https://api.different.com的數據時，即便請求成功到達服務器并獲得響應，瀏覽器也會攔截該響應，導致前端無法獲取數據，這就是典型的跨域問題。

同源策略對不同類型的資源訪問限制不同：

• 允許跨域的資源：<script>、<img>、<link>、<iframe>等標簽加載資源不受同源策略限制，這也是 JSONP 等跨域方案的實現基礎。

• 受限制的資源：通過XMLHttpRequest或fetch發起的 AJAX 請求，若目標資源與當前頁面不同源，會觸發跨域限制。

二、跨域問題出現的原因

跨域問題的根源在于瀏覽器的同源策略，這一策略的存在主要基于安全考量。想象一下，如果沒有同源策略，惡意網站可以隨意通過 AJAX 獲取用戶銀行網站的敏感數據，這將嚴重威脅用戶隱私和網絡安全。

當瀏覽器發起跨域請求時，服務器會正常處理并返回響應，但瀏覽器在收到響應后，會檢查響應頭中的 CORS（跨域資源共享）相關字段，如Access-Control-Allow-Origin。若該字段未包含當前頁面的域名，或未配置正確的跨域許可，瀏覽器將攔截響應，阻止前端 JavaScript 獲取數據，并在控制臺拋出類似 “Access to fetch at... has been blocked by CORS policy” 的錯誤信息。

此外，對于復雜請求（如使用PUT、DELETE方法，或包含自定義請求頭），瀏覽器會先發送一個OPTIONS預檢請求，驗證服務器是否允許實際請求。若預檢失敗，瀏覽器將不再發送實際請求，進一步強化了同源策略的安全性。

三、跨域的解決方案

為了在保障安全的前提下實現跨域訪問，開發者可以采用多種解決方案：

（一）CORS（跨域資源共享）

CORS 是最主流的跨域解決方案，通過在服務器響應頭中設置相關字段，明確允許特定域名訪問資源。

• 簡單請求：服務器只需設置Access-Control-Allow-Origin頭，指定允許的域名（如Access-Control-Allow-Origin: Example Domain），也可使用*允許所有域名訪問（但存在安全風險）。

• 復雜請求：除了Access-Control-Allow-Origin，還需設置Access-Control-Allow-Methods（允許的請求方法）、Access-Control-Allow-Headers（允許的請求頭）等字段，并處理OPTIONS預檢請求。

請具體請參考：https://blog.csdn.net/czhmx/article/details/147895349

?

（二）JSONP（JSON with Padding）

JSONP 利用<script>標簽不受同源策略限制的特性，通過動態創建<script>標簽請求數據。前端定義回調函數，服務端返回包裹在回調函數中的 JSON 數據，瀏覽器執行腳本時觸發回調。但 JSONP 僅支持 GET 請求，且存在 XSS 攻擊風險，已逐漸被 CORS 取代。

請具體請參考：https://blog.csdn.net/czhmx/article/details/147896154

?

（三）postMessage

適用于同源窗口（如 iframe 與父窗口）之間的通信。通過window.postMessage()發送消息，window.addEventListener('message')接收消息，并驗證event.origin確保安全性。

具體請參考：https://blog.csdn.net/czhmx/article/details/147896894

?

四、結語

跨域問題是 Web 安全與功能需求之間的平衡產物。理解同源策略的本質和 CORS 等解決方案，不僅能幫助開發者解決實際開發中的技術難題，還能在保障用戶數據安全的前提下，實現更靈活的 Web 應用架構。隨著技術的發展，未來或許會出現更高效、安全的跨域方案，但掌握現有技術仍是 Web 開發的必修課。

以上文章全面梳理了跨域問題的關鍵知識。如果你覺得某些部分需要更深入的案例或拓展，歡迎告訴我進一步完善。

?