九種跨域方式實現原理（完整版）

前後端資料互動經常會碰到請求跨域，什麼是跨域，以及有哪幾種跨域方式，這是本文要**的內容。

本文完整的源**請猛戳 github 部落格，紙上得來終覺淺，建議大家動手敲敲**。

1.什麼是同源策略及其限制內容？

同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到 xss、csfr 等攻擊。所謂同源是指"協議+網域名稱+埠"三者相同，即便兩個不同的網域名稱指向同乙個 ip 位址，也非同源。

同源策略限制內容有：

但是有三個標籤是允許跨域載入資源：

●window.onmessage = function(e)

4.websocketwebsocket 是 html5 的乙個持久化的協議，它實現了瀏覽器與伺服器的全雙工通訊，同時也是跨域的一種解決方案。websocket 和 http 都是應用層協議，都基於 tcp 協議。但是websocket 是一種雙向通訊協議，在建立連線之後，websocket 的 server 與 client 都能主動向對方傳送或接收資料。同時，websocket 在建立連線時需要借助 http 協議，連線建立好了之後 client 與 server 之間的雙向通訊就與 http 無關了。

原生 websocket api 使用起來不太方便，我們使用socket.io，它很好地封裝了 websocket 介面，提供了更簡單、靈活的介面，也對不支援 websocket 的瀏覽器提供了向下相容。

我們先來看個例子：本地檔案 socket.html 向localhost:3000發生資料和接受資料：

// socket.html// server.js
let express = require('express');
let websocket = require('ws');//記得安裝ws
let wss = new websocket.server();
wss.on('connection',function(ws) );
})

5. node 中介軟體**(兩次跨域)實現原理：同源策略是瀏覽器需要遵循的標準，而如果是伺服器向伺服器請求就無需遵循同源策略。**伺服器，需要做以下幾個步驟：

我們先來看個例子：本地檔案 index.html 檔案，通過**伺服器http://localhost:3000向目標伺服器http://localhost:4000請求資料。

// index.html( server1.js **伺服器(http://localhost:3000) // 第一步：接受客戶端請求 // 第二步：將請求**給伺服器

上述**經過兩次跨域，值得注意的是瀏覽器向**伺服器傳送請求，也遵循同源策略，最後在 index.html 檔案列印出。

6.nginx 反向**

實現原理類似於 node 中介軟體**，需要你搭建乙個中轉 nginx 伺服器，用於**請求。

使用 nginx 反向**實現跨域，是最簡單的跨域方式。只需要修改 nginx 的配置即可解決跨域問題，支援所有瀏覽器，支援 session，不需要修改任何**，並且不會影響伺服器效能。

實現思路：通過 nginx 配置乙個**伺服器（網域名稱與 domain1 相同，埠不同）做跳板機，反向**訪問 domain2 介面，並且可以順便修改 cookie 中 domain 資訊，方便當前域 cookie 寫入，實現跨域登入。

// proxy伺服器
server 
}

最後通過命令列nginx -s reload啟動 nginx。

// 前端開關：瀏覽器是否讀寫cookie

xhr.withcredentials = true;

// 訪問nginx中的**伺服器

7.window.name + iframewindow.name屬性的獨特之處：name 值在不同的頁面（甚至不同網域名稱）載入後依舊存在，並且可以支援非常長的 name 值（2mb）。

其中 a.html 和 b.html 是同域的，都是http://localhost:3000;而 c.html 是http://localhost:4000.

b.html 為中間**頁，與 a.html 同域，內容為空。

// c.html(http://localhost:4000/c.html)

總結：通過 iframe 的 src 屬性由外域轉向本地域，跨域資料即由 iframe 的 window.name從外域傳遞到本地域。這個就巧妙地繞過了瀏覽器的跨域訪問限制，但同時它又是安全操作。

8.location.hash + iframe

實現原理： a.html 欲與 c.html 跨域相互通訊，通過中間頁 b.html 來實現。三個頁面，不同域之間利用 iframe 的 location.hash 傳值，相同域之間直接 js 訪問來通訊。

具體實現步驟：一開始 a.html 給 c.html 傳乙個 hash 值，然後 c.html 收到 hash 值後，再把 hash 值傳遞給 b.html，最後 b.html 將結果放到 a.html 的 hash 值中。

同樣的，a.html 和 b.html 是同域的，都是http://localhost:3000;而 c.html 是http://localhost:4000

9.document.domain + iframe該方式只能用於二級網域名稱相同的情況下，比如a.test.com和b.test.com適用於該方式。

只需要給頁面新增document.domain ='test.com'表示二級網域名稱都相同就可以實現跨域。

實現原理：兩個頁面都通過 js 強制設定 document.domain 為基礎主域，就實現了同域。

我們看個例子：頁面a.zf1.cn:3000/a.html獲取頁面b.zf1.cn:3000/b.html中 a 的值：

// a.html helloa // b.html hellob

九種跨域方式實現原理（完整版）

DES演算法原理完整版

九種跨域方式實現原理

JavaScript 九種跨域方式實現原理

九種跨域方式實現原理（完整版）

DES演算法原理完整版

九種跨域方式實現原理

JavaScript 九種跨域方式實現原理

相關推薦