JSONP跨域

---

1.瀏覽器的同源策略

同源策略限制了從同一個源載入的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用於隔離潛在惡意文件的重要安全機制。

---

2.一個源的定義

如果兩個頁面的協議，埠和域名都相同，則兩個頁面具有相同的源，這就是同源。

http://www.example.com/dir/page.html這個網址，協議是http://，域名是www.example.com，埠是80（默認埠可以省略）。它的同源情況如下。

• http://www.example.com/dir2/other.html：同源
• http://example.com/dir/other.html：不同源（域名不同）
• http://v2.www.example.com/dir/other.html：不同源（域名不同）
• http://www.example.com:81/dir/other.html：不同源（埠不同）

---

參考文章

- https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy

- http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

---

同源政策規定，AJAX請求只能發給同源的網址，否則就報錯。

---

JSONP實現跨域訪問數據

JSONP(JSON with Padding)是JSON的一種「使用模式」

由於同源策略，一般來說位於 server1.example.com 的網頁無法與不是server1.example.com的伺服器溝通，而 HTML 的<script>元素是一個例外。

ajax請求受同源策略影響，不允許進行跨域請求

而script標籤src屬性中的鏈接卻可以訪問跨域的js腳本，利用這個特性，服務端不再返回JSON格式的數據，而是返回一段調用某個函數的js代碼，在src中進行了調用，這樣實現了跨域。

JSONP是伺服器與客戶端跨源通信的常用方法。最大特點就是簡單適用，老式瀏覽器全部支持，伺服器改造非常小。

JSONP的基本思想是，動態創建一個<script>元素，script元素髮送請求不熟同源政策的限制，只能發送get請求。伺服器收到請求後，將數據放在一個指定名字的回調函數里傳回來。

<script>//SRL server rendered javascript button.addEventListener(click, (e) => { //動態創建script var script = document.createElement(script) let functionName=blog1+parseInt(Math.random()*100000,10) //callback window[functionName]=function(result){ if(result===success){ amount.innerText=amount.innerText-1 }else{} } //發送請求 script.src = http://feile.com/pay?callback=+functionName document.body.appendChild(script) script.onload = function (e) { // debugger e.currentTarget.remove() delete window[functionName] } script.onerror = function (e) { alert(fail) e.currentTarget.remove() delete window[functionName] } }) </script>

上面的代碼通過動態創建添加script元素，向伺服器發送請求，查詢字元串必須有callback參數，用來指定回調函數的名字。

response.write(`${query.callback}.call(undefined,success)`)

伺服器收到這個請求以後，會將數據放在回調函數的參數位置返回。這時只要瀏覽器定義了對應的回調函數，該函數就會立即被調用。

推薦閱讀：