如何規避同源政策

Created: November-22, 2018

就客戶端 JavaScript 引擎而言（在瀏覽器中執行的引擎），沒有直接的解決方案可用於從當前域以外的來源請求內容。（順便說一句，這種限制在諸如 Node JS 之類的 JavaScript 伺服器工具中不存在。）

但是，（在某些情況下）確實可以使用以下方法從其他來源檢索資料。請注意，其中一些可能會出現黑客或變通方法，而不是生產系統應該依賴的解決方案。

方法 1：CORS

如今，大多數公共 API 允許開發人員通過啟用名為 CORS（跨源資源共享）的功能在客戶端和伺服器之間雙向傳送資料。瀏覽器將檢查是否設定了某個 HTTP 標頭（Access-Control-Allow-Origin），並且標頭的值中是否列出了請求網站的域。如果是，那麼瀏覽器將允許建立 AJAX 連線。

但是，由於開發人員無法更改其他伺服器的響應標頭，因此無法始終依賴此方法。

方法 2：JSONP

JSON 與 P 增加通常指責是一種解決方法。這不是最簡單的方法，但它仍然可以完成工作。此方法利用了可以從任何域載入指令碼檔案的事實。但是，至關重要的是要提到從外部源請求 JavaScript 程式碼始終存在潛在的安全風險，如果有更好的解決方案，通常應該避免這種情況。

使用 JSONP 請求的資料通常是 JSON ，它恰好適合 JavaScript 中用於物件定義的語法，使得這種傳輸方法非常簡單。讓網站使用通過 JSONP 獲得的外部資料的常用方法是將其包裝在回撥函式中，該函式通過 URL 中的 GET 引數設定。載入外部指令碼檔案後，將呼叫該函式，並將資料作為其第一個引數。

<script>
function myfunc(obj){
    console.log(obj.example_field);
}
</script>
<script src="http://example.com/api/endpoint.js?callback=myfunc"></script>

http://example.com/api/endpoint.js?callback=myfunc 的內容可能如下所示：

myfunc({"example_field":true})

必須首先定義該函式，否則在外部指令碼載入時不會定義該函式。