同源策略（Same-Origin Policy）是瀏覽器安全模型的核心原則之一，它限制了來自不同源的文件或指令碼如何與另一個文件或指令碼進行互動。這是為了防止惡意網站竊取使用者資料。
什麼是“同源”？
要使兩個URL被視為同源，它們必須在以下三個方面完全匹配：
- 協議（Protocol）： 例如
http://，https://，ftp://等。 - 域名（Domain/Host）： 例如
example.com，www.example.com，subdomain.example.com。 注意：埠號不同也被視為不同源，例如example.com:80和example.com:8080是不同源的。 - 埠（Port）： 例如
80，443，8080等。 如果埠未顯式指定，則根據協議使用預設埠（例如，http 預設埠為 80，https 預設埠為 443）。
同源策略限制了什麼？
同源策略主要限制以下幾種型別的跨域操作：
- DOM 訪問： 一個源的指令碼無法訪問另一個源的文件的 DOM 元素。例如，一個來自
a.com的指令碼無法讀取b.com頁面上的內容。 - Cookie、LocalStorage 和 IndexDB 訪問： 一個源的指令碼無法讀取或設定另一個源的 Cookie、LocalStorage 或 IndexDB 資料。
- AJAX 請求： 預設情況下，一個源的指令碼無法透過 AJAX 請求獲取另一個源的資料。 雖然請求可以傳送，但瀏覽器會阻止指令碼訪問響應資料。
如何繞過同源策略（在安全可控的情況下）？
有一些方法可以在特定情況下安全地繞過同源策略的限制：
- CORS（跨域資源共享）： 這是現代瀏覽器推薦的跨域解決方案。伺服器透過設定
Access-Control-Allow-Origin等 HTTP 頭來明確允許特定源的跨域訪問。 - JSONP（JSON with Padding）： 這是一種較老的技術，利用
<script>標籤不受同源策略限制的特點。它透過動態建立<script>標籤，並將回撥函式名作為引數傳遞給伺服器。伺服器將資料包裝在回撥函式中返回，瀏覽器執行該函式，從而實現跨域資料傳輸。 JSONP 只支援 GET 請求。 - 代理伺服器： 透過在同源的伺服器上設定代理，可以將請求轉發到其他源的伺服器，從而繞過同源策略。
- postMessage API： 允許不同源的視窗之間進行安全的通訊。它透過向目標視窗傳送訊息，並在目標視窗監聽訊息事件來實現。
總結
同源策略是瀏覽器安全的重要組成部分，它可以有效地防止跨站指令碼攻擊（XSS）和其他惡意行為。理解同源策略以及如何安全地繞過它對於前端開發者至關重要。 選擇合適的跨域解決方案取決於具體的應用場景和安全需求。 始終優先考慮安全性，並謹慎使用任何繞過同源策略的技術。