前言

前文 《深入跨域 - 從初識到入門》 中，大家已經對同源與跨域的產生歷史與重要性等有了一個初步的了解了，那么我們應該如何解決在日常開發中遇到的跨域引起的問題呢？

2 一覽圖

我們將日常開發中的跨域解決方案大體分為兩類：iframe跨域 與 API跨域:

??

??

3 iframe跨域

3.1 otherWindow.postMessage

otherWindow.postMessage(message，targetOrigin) 方法是 HTML5 引進的特性，可以使用它來向其它的 window 對象發送消息，無論這個 window 對象是屬于同源或不同源，使用起來也比較簡單。

調用 postMessage 方法的 window 對象是指要接收消息的那一個 window 對象，該方法的第一個參數 message 為要發送的消息，類型只能為字符串；第二個參數 targetOrigin 用來限定接收消息的那個 window 對象所在的域，如果不想限定域，可以使用通配符 *。

需要接收消息的 window 對象，可以通過監聽自身的 message 事件來獲取傳過來的消息，消息內容儲存在該事件對象的 data 屬性中。

??

A頁面向B頁面發送信息：

發送信息 - 頁面 http://a.com/index.html 的代碼：

<iframe src="http://b.com/index.html" id="myIframe" onload="test()" style="display: none;" />
<script>
  // 1. iframe載入 http://b.com/index.html 頁面后會執行該函數
  function test() {
    // 2. 獲取 http://b.com/index.html 頁面的 window 對象，
    // 然后通過 postMessage 向 http://b.com/index.html 頁面發送消息
    var iframe=document.getElementById('myIframe');
    var win=iframe.contentWindow;
    win.postMessage('我是來自 http://a.com/index.html 頁面的消息', '*');
  }
</script>

接收信息 - 頁面 http://b.com/index.html 的代碼：

<script type="text/javascript">
  // 注冊 message 事件用來接收消息
  window.onmessage=function(e) {
    e=e || event; // 獲取事件對象
    console.log(e.data); // 通過 data 屬性得到發送來的消息
  }
</script>

?data：從其他 window 中傳遞過來的對象。

?origin：調用 postMessage 時消息發送方窗口的origin源。這個字符串由 協議 + :// + 域名 + : 端口號 拼接而成，例如“https://a.com (隱含端口 80)”。

?source：對發送消息的窗口對象的引用。可以使用此來在具有不同 origin 的兩個窗口之間建立雙向通信。

3.2 document.domain

document.domain可用于獲取及配置document文檔的原始域，此方式只能用于二級域名相同的情況下。

反面舉例：

a.com的一個網頁(a.html)里面 利用iframe引入了一個b.com里的一個網頁(b.html)。

這時在a.html里面可以看到b.html里的內容，但是卻不能利用javascript來操作它。因為這兩個頁面屬于不同的域，在操作之前，瀏覽器會檢測兩個頁面的域是否相等，如果相等，就允許其操作，如果不相等，就會拒絕操作。

這時，當我們利用document.domain把a.com與b.com改成同一個域時，會報"參數無效錯誤"，因為它們的二級域名不相同。

而當我們嘗試設置為com時，會報錯：“com是頂級域名”。

所以需要注意：document.domain 實現跨域的方法存在局限性：需要保證二級域名、協議、端口一致才可以。

正面舉例：

??

比如，有一個頁面，它的地址是 http://a.test.com/index.html，在這個頁面里面有一個 iframe，它的 src 是 http://b.test.com/index.html。很顯然，這個頁面與它里面的 iframe 框架是不同域的，所以我們是無法通過在頁面中書寫 js 代碼來獲取 iframe 中的東西的。

這個時候，document.domain 就可以派上用場了，我們只要在 http://a.test.com/index.html 和 http://b.test.com/index.html 這兩個頁面的index.html中都加入：

代碼如下:
document.domain="test.com";

把document.domain 都設成相同的域名就可以了。

下面我們來看一下使用本方法需要注意的兩個點：

?正如我們在上面的反面舉例中強調的，document.domain 的設置是有限制的，我們只能把 document.domain 設置成自身或更高一級的父域，且二級域名必須相同。例如：a.test.com 中某個文檔的 document.domain 可以設成 a.test.com、test.com 中的任意一個，但是不可以設成 b.test.com，也不可以設成 baidu.com。

?另外，可能有人疑惑為什么兩個頁面都需要設置 document.domain 呢？因為設置document.domain的同時，會把端口重置為null，因此如果只設置一個頁面的document.domain，會導致兩個網址的端口不同，還是達不到同源的目的。

潛在的安全隱患：

2022年1月11日，Chrome developer 博客發布了這么一篇文章。

??

大致意思是，Chrome未來將禁用修改document.domain。如果你的網站依賴于設置document.domain 來解決跨域的問題，那么你可能需要注意了。

而禁止修改的原因主要是：這個改變放寬了同源策略，使父頁面可以訪問 iframe 的文檔并遍歷 DOM 樹，反之亦然。而這種行為引入了極大的安全隱患，主要是針對具有不同子域的共享托管服務。document.domain的設置放開了對同一服務托管的所有其他站點的訪問，這使攻擊者更容易訪問您的站點，因為document.domain忽略了域的端口號部分。

3.3window.location.hash

這是一個比較奇特的方法，比如有一個這樣的url：http://a.com#hello，那么我們通過執行location.hash就可以得到這樣的一個字符串#hello，同時改變hash頁面是不會刷新的。

假如現在我們有A頁面在a.com，B頁面在b.com，服務端運行地址為b.com。我們在A頁面中通過iframe嵌套B頁面。

?從A頁面要傳數據到B頁面

我們在A頁面中通過，修改iframe的src的方法來修改hash的內容。然后在B頁面中添加setInterval定時器或者hashchange事件來監聽我們的hash是否改變，如果改變那么就執行相應的操作。比如向后臺服務器提交數據或者上傳圖片這些。

此時，B頁面域名為b.com，與服務端同域，不會出現跨域問題。

?從B頁面傳遞數據到A頁面

??

經過上面的方法，我們已經從服務端拿到了數據，那么如何發送給A頁面呢？肯定有同學在想，從B頁面向A頁面發送數據就是修改A頁面的hash值了。對沒錯，方法就是這樣，但是在執行的時候會出現一些問題。我們在B頁面中直接：

parent.location.hash="#xxxx"

這樣是不行的，因為前面提到過的同源策略不能直接修改父級的hash值，所以這里采用了一個代理頁面的方法。部分代碼：

在b.com域名下的index.html：

try {
  parent.location.hash='hello';
} catch (e) {
  // ie、chrome的同源安全機制無法修改parent.location.hash，
  // 所以要利用一個中間的a.com域下的代理iframe修改location.hash
  // 如 A=> B=> C，其中，當前頁面為B,AC在同一域名下
  // B不能直接修改A的hash值，故修改C，然后由C修改A
  const ifrproxy=document.createElement('iframe');
  ifrproxy.style.display='none';
  // 注意該文件在"a.com"域下
  ifrproxy.src='http://a.com/c.html#hello';
  document.body.appendChild(ifrproxy);
}

我們可以利用try...catch...進行一個兼容。如果可以直接修改我們就直接修改，如果不能直接修改，那么我們在B頁面中再添加一個iframe然后指向C頁面(我們暫時叫他代理頁面C，此頁面和A頁面是在相同的一個域下面)，我們可以用同樣的方法在url后面添加需要傳遞的信息。在代理頁面中：

parent.parent.location.hash=self.location.hash.substring(1);

只需要寫這樣的一段js代碼就完成了修改A頁面的hash值。

下面，我們只需要對A頁面中hash值的變化進行監聽：

?可以通過添加一個setInterval事件，來監聽hash值的改變

?可以通過hashchange事件監聽

// http://a.com/index.html
window.onhashchange=checkMessage;


function checkMessage() {
  var message=window.location.hash;
  // ...
}

實現的核心思路就是通過修改URL的hash值，然后用定時器或hashchange事件來監聽值的改變。

這種方法存在諸多的缺點，并不推薦，只是簡單介紹一下：

?傳遞的數據會直接在URL里面顯示出來，不是很安全

?傳輸的數據容量和類型都有限

3.4window.name

window 對象有個 name 屬性，該屬性有個特征：即在一個窗口（window）的生命周期內，窗口載入的所有的頁面（不管是相同域的頁面還是不同域的頁面）都是共享一個 window.name 的，每個頁面對 window.name 都有讀寫的權限，window.name 是持久存在一個窗口載入過的所有頁面中的，并不會因新頁面的載入而進行重置。

如果name值沒有修改，那么它將不會變化，并且這個值可以非常的長(2MB)。

通過下面的例子介紹如何通過 window.name 來跨域獲取數據的。

??

頁面 http://b.com/index.html 的代碼：

<script type="text/javascript">
  // 1. 給當前的 window.name 設置一個 http://a.com/index.html 頁面想要得到的數據值 
  window.name="hello world!";
</script>

頁面 http://a.com/index.html 的代碼：

<iframe src="http://b.com/index.html" id="myIframe" onload="test()" style="display: none;" />
<script>
  // 2. iframe載入 "http://b.com/index.html 頁面后會執行該函數
  function test() {
    const iframe=document.getElementById('myIframe');
    
    // 重置 iframe 的 onload 事件程序，
    // 此時經過后面代碼重置 src 之后，
    // http://a.com/index.html 頁面與該 iframe 在同一個源了，可以相互訪問了
    iframe.onload=function() {
      // 4. 獲取 iframe 里的 window.name
      var data=iframe.contentWindow.name; 
      console.log(data); // hello world!
    };

    // 3. 重置一個與 http://a.com/index.html 頁面同源的頁面
    iframe.src='http://a.com/c.html';
  }
</script

方法原理：A頁面通過iframe加載B頁面。B頁面獲取完數據后，把數據賦值給window.name。然后在A頁面中修改iframe使他指向本域的一個頁面。這樣在A頁面中就可以直接通過 iframe.contentWindow.name 獲取到B頁面中獲取到的數據。

4 API跨域

4.1 JSONP

JSONP(JSON with Padding) 是 json 的一種"使用模式"，可以讓網頁從別的域名（網站）那獲取資料，即跨域讀取數據。

原理：

?在當前頁面中，通過script標簽加載指定資源路徑，并利用這個請求路徑傳遞數據。

?我們需要知道，對于script標簽請求回來的內容，瀏覽器會作為腳本執行。

?所以，針對當前頁面所需要的數據，跨域的服務端把數據放進當前頁面本地的一個js方法里，當前頁面在獲取到script標簽的內容后會執行此方法，在本地的js對返回的數據進行處理。這樣就實現了不同域名下的兩個站點間的交流。

??

// http://a.com/index.html
// 1. 定義一個 回調函數 handleResponse 用來接收返回的數據
function handleResponse(data) {
console.log(data);
};


// 2. 動態創建一個 script 標簽，并且告訴后端回調函數名叫 handleResponse
var body=document.getElementsByTagName('body')[0];
var script=document.createElement('script');
script.src='http://b.com/api?callback=handleResponse';
body.appendChild(script);


// 3. 通過 script.src 請求 `http://b.com/api?callback=handleResponse`，
// 4. 后端能夠識別這樣的 URL 格式并處理該請求，然后返回 handleResponse(JSON.stringify({ "data": "hello" })) 給瀏覽器
// 5. 前端在接收到 handleResponse({ "data": "hello" }) 之后立即執行 ，也就是執行 handleResponse 方法，獲得后端返回的數據，這樣就完成一次跨域請求了

服務端 - Node：

// http://b.com/api
const http=require('http');
const urllib=require('url');


const port=80;


http.createServer(function (req, res) {
  const { query }=urllib.parse(req.url, true);
  if (query && query.callback) {
    const { callback }=query
    const data={ "data": "hello" }
    const str=`${callback}(${JSON.stringify(data)})` // 拼成callback(data)        
    res.end(str);
  } else {
    res.end(JSON.stringify('啥也沒有啊你'));
  }
}).listen(port, function () {
  console.log('server is listening on port ' + port);
}

JSONP的實現流程

1.前端：

?聲明一個回調函數（如handleResponse），其函數名當做參數值，要傳遞給跨域請求數據的服務器，函數形參為要獲取的目標數據（服務器返回的data）。

?創建一個<script>標簽，把那個跨域的API數據接口地址，賦值給script的src，還要在這個地址中向服務器傳遞該函數名（可以作為url的查詢字符串:?callback=handleResponse）。

1.服務端：

?服務器接收到請求后，需要根據約定的字段callback進行特殊的處理：把傳遞進來的函數名和需要傳遞的數據拼接成一個字符串，例如：傳遞進來的函數名是handleResponse，需要傳遞的數據{ "data": "hello" }。最終拼接的字符串是handleResponse(JSON.stringify({ "data": "hello" }))。

?最后服務器把準備的數據通過HTTP協議返回給前端，前端會將返回的報文作為js執行，從而調用之前聲明的回調函數（handleResponse），對返回的數據進行操作。

優點

?它不像XMLHttpRequest 對象實現 Ajax 請求那樣受到同源策略的限制

?簡單，兼容性好，可用于解決主流瀏覽器的跨域數據訪問問題。

?不需要 XMLHttpRequest 等的支持；并且在請求完畢后可以通過調用 callback 的方式回傳結果。

缺點

?僅支持 GET 請求，具有局限性。

?安全問題。

?無法捕獲JSONP請求時的連接異常。

4.2 CORS

4.2.1 概述

在關于同源策略的概述中，我們知道了當一個資源從與該資源本身所在的服務器不同的域、協議或端口請求一個資源時，需要發起一個跨域 HTTP 請求。

而跨域資源共享（CORS） 是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing），定義了在必須訪問跨域資源時，瀏覽器與服務器應該如何溝通。

CORS使用自定義的 HTTP 頭來告訴瀏覽器，讓運行在一個origin(domain) 上的Web應用被準許訪問來自不同源服務器上的指定的資源。

簡單來說，就是允許服務器聲明哪些源站通過瀏覽器有權限訪問哪些資源。

其實對于跨域資源的請求，瀏覽器已經把我們的請求發放給了服務器，瀏覽器也接受到了服務器的響應，只是瀏覽器一看我們兩個的域不一樣就把消息給攔截了，不給我們顯示。所以如果在服務器就告訴瀏覽器這個數據是每個源都可以獲取的就可以了。這就是CORS跨域資源共享。

這樣的話，任何源都可以通過AJAX發起請求來獲取我們提供的數據。針對不同語言的服務器后端有不一樣的處理方法，但是實質是一樣的。允許瀏覽器向跨域服務器發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。

CORS需要瀏覽器和服務器同時支持。目前，幾乎所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。

瀏覽器端：

目前，所有瀏覽器都支持該功能（IE10以下不行）。整個CORS通信過程，都是瀏覽器自動完成，不需要用戶參與。

服務端：

CORS通信與AJAX沒有任何差別，因此不需要改變以前的業務邏輯。只不過，瀏覽器會在請求中攜帶一些頭信息，我們需要以此判斷是否允許其跨域，然后在響應頭中加入一些信息即可。這一般通過過濾器完成即可

??

我們先來看一下一個CORS請求的完整過程是怎么完成的：

??

如上圖所示，我們可以看到在CORS過程中有一個預檢請求 preflight request (if necessary)，那么是否執行預檢的標準是什么呢？我們先來大概了解一下，后面會對具體的劃分標準進行詳述。

對那些可能對服務器數據產生副作用的 HTTP 請求方法（特別是 GET 以外的 HTTP 請求，或者搭配特殊Content-Type信息的 POST 請求），瀏覽器在發送真正的請求之前，必須首先使用 OPTIONS 方法發起一個預檢請求（preflight request），從而獲知服務端是否允許該跨域請求。

服務器確認允許之后，才發起實際的 HTTP 請求。在預檢請求的返回中，服務器端也可以通知客戶端，是否需要攜帶身份憑證（包括 Cookies 和 HTTP 認證相關數據）。

下面我們來具體看一下，CORS請求是否執行預檢的具體判斷標準是什么？

瀏覽器將CORS請求分成兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。其中，簡單請求就是某些不會觸發CORS預檢的請求，那么與之對應的，非簡單請求就會觸發預檢請求了。

至于簡單請求與非簡單請求是如何確認的呢，我們接著往下看。

4.2.2 簡單請求

請求方法是以下三種方法之一：

?GET

?POST

?HEAD（與get請求類似，是一種只發送請求不會收到響應的請求方式，通常單純是為了判斷某個資源是否存在，比get意義更加明確，日常用的比較少）

HTTP的頭信息不超出以下幾種字段：

?Accept

?Accept-Language

?Content-Language

?Content-Type：只限于三個值 application/x-www-form-urlencoded（一般用于表單移交，不支持文件上傳，以key1=val1&key2=val2的方式提交）、multipart/form-data（用于在表單進行文件上傳）、text/plain（用于數據以純文本形式編碼）

??

綜上，凡是不同時滿足上面兩個條件，就屬于非簡單請求。

瀏覽器對這兩種請求的處理，是不一樣的。

下面通過簡單的區分 headers.Content-Type，實現CORS簡單請求與復雜請求

fetch('https://www.baidu.com/', {
  method: 'POST',
  headers: {
    'Content-Type': 'text/plain',
  }
})
  .then((resp)=> resp.text())
  .then(console.log)

??

?在請求中會附加一個額外的 Origin 頭部，其中包含請求頁面的源信息（協議、域名和端口），以便服務器根據這個頭部信息來決定是否給予響應。例如：Origin: http://a.jdl.com

?如果服務器認為這個請求可以接受，就在 Access-Control-Allow-Origin 頭部中回復相同的源信息。例如：Access-Control-Allow-Origin：http://a.jdl.com

?如果需要包含 cookie 信息，ajax 請求需要設置 xhr 的屬性 withCredentials 為 true，服務器需要設置響應頭部 Access-Control-Allow-Credentials: true。

4.3.3 復雜請求

fetch('https://www.baidu.com/', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  }
})
  .then((resp)=> resp.text())
  .then(console.log)

??

上圖中，我們可以看到，瀏覽器在發送真正的請求之前，會先發送一個 Preflight 請求給服務器，這種請求使用 OPTIONS 方法，發送下列頭部：

?Origin：與簡單的請求相同。

?Access-Control-Request-Method: 請求自身使用的方法。

?Access-Control-Request-Headers: 自定義的頭部信息，多個頭部以逗號分隔。

例如：

Origin: http://a.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: authorization,content-type,lop-dn,md5-content,token

??

發送這個請求后，服務器可以決定是否允許這種類型的請求。服務器通過在響應中發送如下頭部與瀏覽器進行溝通：

?Access-Control-Allow-Origin：

?Access-Control-Allow-Methods: 允許的方法，多個方法以逗號分隔。

?Access-Control-Allow-Headers: 允許的頭部，多個方法以逗號分隔。

?Access-Control-Max-Age: 應該將這個 Preflight 請求緩存多長時間（以秒表示）。

例如：

Access-Control-Allow-Origin: http://a.jdl.com
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: authorization,content-type,lop-dn,md5-content,token
Access-Control-Max-Age: 1728000

一旦服務器通過 Preflight 請求允許該請求之后，以后每次瀏覽器正常的 CORS 請求，就都跟簡單請求一樣了，如下：

??

4.3 Nginx

跨域原理：同源策略是瀏覽器對XMLHttpRequest等的安全策略，不是HTTP協議的一部分。服務器端調用HTTP接口只是使用HTTP協議，不會執行JS腳本，不需要同源策略，也就不存在跨越問題。

所以，同源策略只是瀏覽器的一個策略而已，它是限制不到后端的，也就是前端->后端會被同源策略限制，但是后端->后端則不會被限制。

因此，可以通過Nginx代理，先訪問已設置CORS的【Nginx代理服務】，再讓【Nginx代理服務】去訪問【業務服務端】獲取數據到【Nginx代理服務】，【Nginx代理服務】再把數據傳到前端。

實現思路：通過nginx配置一個代理服務器（http://b.com）做跳板機，反向代理訪問http://c.com接口。

??

注意：其實Nginx等中間服務器的出現，主要是針對服務端不適合直接設置CORS跨域的情況，需要用過中間服務進行API跨域的處理。

4.4 Node代理

其實Node接口代理跟Nginx是一個道理，都是把請求發給一個中間服務，只不過這里是我們利用Node自己搭建了一個代理服務器。

??

4.4.1 前端

// index.html  http://a.com
// 步驟一：創建異步對象
const ajax=new XMLHttpRequest();
//步驟二：設置請求的url參數,參數一是請求的類型,參數二是請求的url,可以帶參數,動態的傳遞參數到服務端    
ajax.open('get', 'http://b.com/proxy?name=Alex&age=18');
//步驟三：發送請求    
ajax.send();
//步驟四：注冊事件，onreadystatechange狀態改變就會調用    
ajax.onreadystatechange=function () {
  if (ajax.readyState==4 && ajax.status==200) {
    //步驟五：如果能夠進到這個判斷，說明數據完美的回來了         
    console.log(ajax.responseText); // 輸入相應的內容        
  }
}

4.4.2 服務端-代理

// http://b.com/proxy
const http=require('http');
const urllib=require('url');
const querystring=require('querystring');
const port=80;

http.createServer(function (req, res) {
  // 開啟CORS    
  res.writeHead(200, {
    //設置允許跨域的域名，也可設置*允許所有域名        
    'Access-Control-Allow-Origin': 'http://a.com',
    //跨域允許的請求方法，也可設置*允許所有方法        
    "Access-Control-Allow-Methods": "DELETE,PUT,POST,GET,OPTIONS",
    //允許的header類型        
    'Access-Control-Allow-Headers': 'Content-Type'
  })
  const { query }=urllib.parse(req.url, true);
  const { methods='GET', headers }=req
  const proxyReq=http.request({
    host: 'http://c.com',
    path: `/?${querystring.stringify(query)}`,
    methods,
    headers
  }, proxyRes=> {
    proxyRes.on('data', chunk=> {
      console.log(chunk.toString())
      res.end(chunk.toString())
    })
  }).end()
}).listen(port, function () {
  console.log('server is listening on port ' + port);
}

4.4.3 服務端-代理

// http://c.com
const http=require('http');
const urllib=require('url');

const port=80;

http.createServer(function (req, res) {
  const { query: { name, age } }=urllib.parse(req.url, true);
  res.end(`${name}今年${age}歲啦！！！`);
}).listen(port, function () {
  console.log('server is listening on port ' + port);
}

4.5 WebSocket

WebSocket 是 HTML5 標準的一個新的網絡協議。它是基于 HTTP 協議之上的擴展，是一種可以雙向通信的協議。

實現了瀏覽器與服務器全雙工通信，能更好的節省服務器資源和帶寬并達到實時通訊。

在建立連接后，WebSocket 服務器和 客戶端 都能主動的向對方發送或接收數據。

傳統的 HTTP 協議 通信，服務端是不能主動發信息給客戶端的。必須是客戶端一個請求，服務器一個響應，一來一回。那么基于這種通信的方式，如果想構建一個網絡在線聊天應用，就沒有辦法，因為不能主動推送信息，需要客戶端一直輪詢。

那么問題來了，為什么WebSocket 可以跨域呢？

因為同源策略僅僅是針對HTTP的，因此WebSocket 沒有同源限制，客戶端可以發送任意請求到服務端，只要目標服務器允許。WebSocket可以跟 HTTP 協議共用一個端口，它協議的前綴是 ws://，如果是 HTTPS，那么就是 wss://。

websocket請求的請求頭中會像CORS一樣加入origin字段，服務端可以根據自身需要，以這個字段來判斷是否通過該請求。

??

??

?server.js

// http://b.com
const WebSocket=require('ws')
const WebSocketServer=WebSocket.Server

// 創建 websocket 服務器 監聽在 3000 端口
const wss=new WebSocketServer({ port: 3000 })

// 服務器被客戶端連接
wss.on('connection', (ws)=> {
  // 通過 ws 對象，就可以獲取到客戶端發送過來的信息和主動推送信息給客戶端
  let i=0
  setInterval(function f() {
    ws.send(i++) // 每隔 1 秒給連接方報一次數
  }, 1000)
}

?client.js

// http://a.com
const WebSocket=require('ws')
const ws=new WebSocket('ws://b.com:3000')

// 接受
ws.on('message', (message)=> {
  console.log(message)

  // 當數字達到 10 時，斷開連接
  if (message==10) {
    ws.send('close')
    ws.close()
  }
}

5 總結

以上，我們完成了對同源與跨域的理論認識與解決方案的學習。針對不同解決方案的適用場景，在什么情況下應該使用哪種方案，大家應該具體問題具體分析，根據不同方案的優缺點進行對比選擇。

者：強哥科技興

鏈接：https://www.jianshu.com/p/383c3f3d2966

什么是跨域

JavaScript出于安全方面的考慮，不允許跨域調用其他頁面的對象。那什么是跨域呢，簡單地理解就是因為JavaScript同源策略的限制，a.com域名下的js無法操作b.com或是c.a.com域名下的對象。

當協議、子域名、主域名、端口號中任意一個不相同時，都算作不同域。不同域之間相互請求資源，就算作“跨域”。

有一點必須要注意：跨域并不是請求發不出去，請求能發出去，服務端能收到請求并正常返回結果，只是結果被瀏覽器攔截了。之所以會跨域，是因為受到了同源策略的限制，同源策略要求源相同才能正常進行通信，即協議、域名、端口號都完全一致。

大家可以參照下圖，有助于深入理解跨域。

特別說明兩點：

第一：如果是協議和端口造成的跨域問題“前臺”是無能為力的。

第二：在跨域問題上，域僅僅是通過“URL的首部”來識別而不會根據域名對應的IP地址是否相同來判斷。“URL的首部”可以理解為“協議, 域名和端口必須匹配”。

什么是同源策略及其限制

同源策略限制從一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用于隔離潛在惡意文件的關鍵的安全機制。它的存在可以保護用戶隱私信息，防止身份偽造等(讀取Cookie)。

同源策略限制內容有：

Cookie、LocalStorage、IndexedDB 等存儲性內容

DOM 節點

AJAX 請求不能發送

但是有三個標簽是允許跨域加載資源：

接下來我們討論下有哪些處理跨域的方法。但所有的跨域都必須經過信息提供方的允許。如果未經允許即可獲取，那是瀏覽器同源策略出現漏洞。

處理跨域方法一——JSONP

1.JSONP原理

利用<script>元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 數據。JSONP請求一定需要對方的服務器做支持才可以。

2.JSONP和AJAX對比

JSONP和AJAX相同，都是客戶端向服務器端發送請求，從服務器端獲取數據的方式。但AJAX屬于同源策略，JSONP屬于非同源策略（跨域請求）

3.JSONP優缺點

JSONP優點是兼容性好，可用于解決主流瀏覽器的跨域數據訪問的問題。缺點是僅支持get方法具有局限性。

4.JSONP的流程(以第三方API地址為例，不必考慮后臺程序)

聲明一個回調函數，其函數名(如fn)當做參數值，要傳遞給跨域請求數據的服務器，函數形參為要獲取目標數據(服務器返回的data)。

創建一個<script>標簽，把那個跨域的API數據接口地址，賦值給script的src,還要在這個地址中向服務器傳遞該函數名（可以通過問號傳參:?callback=fn）。

服務器接收到請求后，需要進行特殊的處理：把傳遞進來的函數名和它需要給你的數據拼接成一個字符串,例如：傳遞進去的函數名是fn，它準備好的數據是fn([{"name":"jianshu"}]）。

最后服務器把準備的數據通過HTTP協議返回給客戶端，客戶端再調用執行之前聲明的回調函數（fn），對返回的數據進行操作。

其中 fn 是客戶端注冊的回調的函數,目的獲取跨域服務器上的json數據后，對數據進行在處理。

最后服務器返回給客戶端數據的格式為:

5.jQuery的jsonp形式

JSONP都是GET和異步請求的，不存在其他的請求方式和同步請求，且jQuery默認就會給JSONP的請求清除緩存。

處理跨域方法二——CORS

1.CORS原理

整個CORS通信過程，都是瀏覽器自動完成，不需要用戶參與。對于開發者來說，CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺。因此，實現CORS通信的關鍵是服務器。只要服務器實現了CORS接口，就可以跨源通信。

2.CORS優缺點

CORS要求瀏覽器(>IE10)和服務器的同時支持，是跨域的根本解決方法，由瀏覽器自動完成。

優點在于功能更加強大支持各種HTTP Method，缺點是兼容性不如JSONP。

只需要在服務器端做一些小小的改造即可：

例如：網站http://localhost:{{63342:0}}/ 頁面要請求http://localhost:3000/users/userlist 頁面，userlist頁面返回json字符串格{name: 'Mr.Cao', gender: 'male', career: 'IT Education'}

在響應頭上添加Access-Control-Allow-Origin屬性，指定同源策略的地址。同源策略默認地址是網頁的本身。只要瀏覽器檢測到響應頭帶上了CORS，并且允許的源包括了本網站，那么就不會攔截請求響應。

處理跨域方法三——WebSocket

Websocket是HTML5的一個持久化的協議，它實現了瀏覽器與服務器的全雙工通信，同時也是跨域的一種解決方案。WebSocket和HTTP都是應用層協議，都基于 TCP 協議。但是 WebSocket 是一種雙向通信協議，在建立連接之后，WebSocket 的 server 與 client 都能主動向對方發送或接收數據。同時，WebSocket 在建立連接時需要借助 HTTP 協議，連接建立好了之后 client 與 server 之間的雙向通信就與 HTTP 無關了。

原生WebSocket API使用起來不太方便，我們使用Socket.io，它很好地封裝了webSocket接口，提供了更簡單、靈活的接口，也對不支持webSocket的瀏覽器提供了向下兼容。

處理跨域方法四——postMessage

如果兩個網頁不同源，就無法拿到對方的DOM。典型的例子是iframe窗口和window.open方法打開的窗口，它們與父窗口無法通信。HTML5為了解決這個問題，引入了一個全新的API：跨文檔通信 API（Cross-document messaging）。這個API為window對象新增了一個window.postMessage方法，允許跨窗口通信，不論這兩個窗口是否同源。postMessage方法的第一個參數是具體的信息內容，第二個參數是接收消息的窗口的源（origin），即"協議 + 域名 + 端口"。也可以設為*，表示不限制域名，向所有窗口發送。

接下來我們看個例子：

近期文章：

等等，先別走！「碼個蛋」又有活動了！參與活動不但可以培養自己的好習慣，還能拿到「碼個蛋」IP系列專屬獎品，速度要快...

今日問題：

你希望公眾號增加什么內容呢，請大聲說出來？

留言格式：

打卡x 天，答：xxx。

告訴你一個小技巧：

只需3步，你將不會錯過任何一篇文章！

// index.html`
function` `jsonp({ url, params, callback }) {`
return` `new` `Promise((resolve, reject)={`
let script=document.createElement(``'script'``)`
window[callback]=` `function``(data) {`
resolve(data)`
document.body.removeChild(script)`
}`
params={ ...params, callback }` `// wd=b&callback=show`
let arrs=[]`
for` `(let key` `in` `params) {`
arrs.push(`${key}=${params[key]}`)`
}`
script.src=`${url}?${arrs.join(``'&'``)}``
document.body.appendChild(script)`
})`
}`
jsonp({`
url:` `'[http://localhost:3000/say](http://localhost:3000/say)'``,`
params: { wd:` `'Iloveyou'` `},`
callback:` `'show'`
}).then(data={`
console.log(data)`
})`

// server.js
let express=require('express')
let app=express()
app.get('/say', function(req, res) {
 let { wd, callback }=req.query
 console.log(wd) // Iloveyou
 console.log(callback) // show
 res.end(`${callback}('我不愛你')`)
})
app.listen(3000)

$.ajax({`
url:``"[http://crossdomain.com/jsonServerResponse](http://crossdomain.com/jsonServerResponse)"``,`
dataType:``"jsonp"``,`
type:``"get"``,``//可以省略`
jsonpCallback:``"show"``,``//->自定義傳遞給服務器的函數名，而不是使用jQuery自動生成的，可省略`
jsonp:``"callback"``,``//->把傳遞函數名的那個形參callback，可省略`
success:``function` `(data){`
console.log(data);}`
});`

// 允許哪個方法訪問我
res.setHeader('Access-Control-Allow-Methods', 'PUT')
// 預檢的存活時間
res.setHeader('Access-Control-Max-Age', 6)
// OPTIONS請求不做任何處理
if (req.method==='OPTIONS') {
 res.end()
}
// 定義后臺返回的內容
app.put('/getData', function(req, res) {
 console.log(req.headers)
 res.end('我不愛你')
})

// index.html`
let xhr=` `new` `XMLHttpRequest()`
document.cookie=` `'name=xiamen'` `// cookie不能跨域`
xhr.withCredentials=` `true` `// 前端設置是否帶cookie`
xhr.open(``'PUT'``,` `'[http://localhost:4000/getData](http://localhost:4000/getData)'``,` `true``)`
xhr.setRequestHeader(``'name'``,` `'xiamen'``)`
xhr.onreadystatechange=` `function``() {`
if` `(xhr.readyState===4) {`
if` `((xhr.status >=200 && xhr.status < 300) || xhr.status===304) {`
console.log(xhr.response)`
//得到響應頭，后臺需設置Access-Control-Expose-Headers`
console.log(xhr.getResponseHeader(``'name'``))`
}`
}`
}`
xhr.send()`
//server1.js
let express=require('express');
let app=express();
app.use(express.static(__dirname));
app.listen(3000);
//server2.js`
let express=require(``'express'``)`
let app=express()`
let whitList=[``'[http://localhost:3000](http://localhost:3000/)'``] //設置白名單`
app.use(``function``(req, res, next) {`
let origin=req.headers.origin`
if` `(whitList.includes(origin)) {`
// 設置哪個源可以訪問我`
res.setHeader(``'Access-Control-Allow-Origin'``, origin)`
// 允許攜帶哪個頭訪問我`
res.setHeader(``'Access-Control-Allow-Headers'``,` `'name'``)`
// 允許哪個方法訪問我`
res.setHeader(``'Access-Control-Allow-Methods'``,` `'PUT'``)`
// 允許攜帶cookie`
res.setHeader(``'Access-Control-Allow-Credentials'``,` `true``)`
// 預檢的存活時間`
res.setHeader(``'Access-Control-Max-Age'``, 6)`
// 允許返回的頭`
res.setHeader(``'Access-Control-Expose-Headers'``,` `'name'``)`
if` `(req.method===` `'OPTIONS'``) {`
res.end()` `// OPTIONS請求不做任何處理`
}`
}`
next()`
})`
app.put(``'/getData'``,` `function``(req, res) {`
console.log(req.headers)`
res.setHeader(``'name'``,` `'jw'``)` `//返回一個響應頭，后臺需設置`
res.end(``'我
app.get(``'/getData'``,` `function``(req, res) {`
console.log(req.headers)`
res.end(``'我不愛你'``)`
})`
app.use(express.static(__dirname))`
app.listen(4000)`
不愛你'``)`
})`

// a.html`
<``iframe` `src``=``"[http://localhost:4000/b.html](http://localhost:4000/b.html)"` `frameborder``=``"0"`
id``=``"frame"` `onload``=``"load()"``></``iframe``//等它加載完觸發一個事件`
//內嵌在[http://localhost:3000/a.html](http://localhost:3000/a.html)`
<script>`
function load() {`
let frame=document.getElementById('frame')`
frame.contentWindow.postMessage('我愛你', '[http://localhost:4000](http://localhost:4000/)') //發送數據`
window.onmessage=function(e) { //接受返回數據`
console.log(e.data) //我不愛你`
}`
}`
</``script``>`
// b.html
 window.onmessage=function(e) {
 console.log(e.data) //我愛你
 e.source.postMessage('我不愛你', e.origin)
 }

// socket.html`
<``script``>`
let socket=new WebSocket('[ws://localhost:3000](ws://localhost:3000/)');`
socket.onopen=function () {`
socket.send('我愛你');//向服務器發送數據`
}`
socket.onmessage=function (e) {`
console.log(e.data);//接收服務器返回的數據`
}`
</``script``>`
// server.js
let express=require('express');
let app=express();
歡迎加入全棧開發交流劃水交流圈：582735936
面向劃水1-3年前端人員
幫助突破劃水瓶頸，提升思維能力
let WebSocket=require('ws');//記得安裝ws
let wss=new WebSocket.Server({port:3000});
wss.on('connection',function(ws) {
 ws.on('message', function (data) {
 console.log(data);
 ws.send('我不愛你')
 });
})

// index.html([http://127.0.0.1:5500](http://127.0.0.1:5500/))`
<``script` `src``=``"[https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js](https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js)"``></``script``>`
<``script``>`
$.ajax({`
url: '[http://localhost:3000](http://localhost:3000/)',`
type: 'post',`
data: { name: 'xiamen', password: '123456' },`
contentType: 'application/json;charset=utf-8',`
success: function(result) {`
console.log(result) // {"title":"fontend","password":"123456"}`
},`
error: function(msg) {`
console.log(msg)`
}`
})`
</``script``>`
// server1.js 代理服務器([http://localhost:3000](http://localhost:3000/))`
const http=require(``'http'``)`
// 第一步：接受客戶端請求`
const server=http.createServer((request, response)={`
// 代理服務器，直接和瀏覽器直接交互，需要設置CORS 的首部字段`
response.writeHead(200, {`
'Access-Control-Allow-Origin'``:` `'*'``,`
'Access-Control-Allow-Methods'``:` `'*'``,`
'Access-Control-Allow-Headers'``:` `'Content-Type'`
})`
// 第二步：將請求轉發給服務器`
const proxyRequest=http`
.request(`
{`
host:` `'127.0.0.1'``,`
port: 4000,`
url:` `'/'``,`
method: request.method,`
headers: request.headers`
},`
serverResponse={`
// 第三步：收到服務器的響應`
var` `body=` `''`
serverResponse.on(``'data'``, chunk={`
body +=chunk`
})`
serverResponse.on(``'end'``, ()={`
console.log(``'The data is '` `+ body)`
// 第四步：將響應結果轉發給瀏覽器`
response.end(body)`
})`
}`
)`
.end()`
})`
server.listen(3000, ()={`
console.log(``'The proxyServer is running at [http://localhost:3000](http://localhost:3000/)'``)`
})`
// server2.js([http://localhost:4000](http://localhost:4000/))`
const http=require(``'http'``)`
const data={ title:` `'fontend'``, password:` `'123456'` `}`
const server=http.createServer((request, response)={`
if` `(request.url===` `'/'``) {`
response.end(JSON.stringify(data))`
}`
})`
server.listen(4000, ()={`
console.log(``'The server is running at [http://localhost:4000](http://localhost:4000/)'``)`
})`

// proxy服務器
server {
 listen 80;
 server_name www.domain1.com;
 location / {
 proxy_pass http://www.domain2.com:8080; #反向代理
 proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
 index index.html index.htm;
 
 # 當用webpack-dev-server等中間件代理接口訪問nignx時，此時無瀏覽器參與，故沒有同源限制，下面的跨域配置可不啟用
 add_header Access-Control-Allow-Origin http://www.domain1.com; #當前端只跨域不帶cookie時，可為*
 add_header Access-Control-Allow-Credentials true;
 }
}

// index.html`
var xhr=new XMLHttpRequest();`
// 前端開關：瀏覽器是否讀寫cookie`
xhr.withCredentials=true;`
// 訪問nginx中的代理服務器`
xhr.open('get', '[http://www.domain1.com:81/?user=admin](http://www.domain1.com:81/?user=admin)', true);`
xhr.send();`
// server.js
var http=require('http');
var server=http.createServer();
var qs=require('querystring');
server.on('request', function(req, res) {
 var params=qs.parse(req.url.substring(2));
 // 向前臺寫cookie
 res.writeHead(200, {
 'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly' // HttpOnly:腳本無法讀取
 });
 res.write(JSON.stringify(params));
 res.end();
});
server.listen('8080');
console.log('Server is running at port 8080...');

// a.html([http://localhost:3000/b.html](http://localhost:3000/b.html))`
<``iframe` `src``=``"[http://localhost:4000/c.html](http://localhost:4000/c.html)"` `frameborder``=``"0"` onload``=``"load()"` `id``=``"iframe"``></``iframe``>`
<``script``>`
let first=true`
// onload事件會觸發2次，第1次加載跨域頁，并留存數據于window.name`
function load() {`
if(first){`
// 第1次onload(跨域頁)成功后，切換到同域代理頁面`
let iframe=document.getElementById('iframe');`
iframe.src='[http://localhost:3000/b.html](http://localhost:3000/b.html)';`
first=false;`
}else{`
// 第2次onload(同域b.html頁)成功后，讀取同域window.name中數據`
console.log(iframe.contentWindow.name);`
}`
歡迎加入全棧開發交流劃水交流圈：582735936
面向劃水1-3年前端人員
幫助突破劃水瓶頸，提升思維能力
}`
</``script``>`

// c.html([http://localhost:4000/c.html](http://localhost:4000/c.html))`
<``script``>`
window.name='我不愛你'`
</``script``>`

// a.html`
<``iframe` `src``=``"[http://localhost:4000/c.html](http://localhost:4000/c.html)#iloveyou"``></``iframe``>`
<``script``>`
window.onhashchange=function () { //檢測hash的變化`
console.log(location.hash);`
}`
</``script``>`
// b.html`
<``script``>
window.parent.parent.location.hash=location.hash`
//b.html將結果放到a.html的hash值中，b.html可通過parent.parent訪問a.html頁面`
</``script``>`
// c.html`
console.log(location.hash);`
let iframe=document.createElement('iframe');`
iframe.src='[http://localhost:3000/b.html](http://localhost:3000/b.html)#idontloveyou';`
document.body.appendChild(iframe);`
9.document.domain + iframe`

// a.html`
<``body``>`
helloa`
<``iframe` `src``=``"[http://b.zf1.cn:3000/b.html](http://b.zf1.cn:3000/b.html)"` frameborder``=``"0"`onload``=``"load()"` `id``=``"frame"``></``iframe``>`
<``script``>`
document.domain='zf1.cn'`
function load() {`
}`
歡迎加入全棧開發交流劃水交流圈：582735936
面向劃水1-3年前端人員
幫助突破劃水瓶頸，提升思維能力
</``script``>`
</``body``>`
// b.html
<body>
 hellob
 <script>
 document.domain='zf1.cn'
 var a=100;
 </script>
</body>