一、什么是跨域？

跨域就是非同源策略請求。

1.1、什么是同源策略？

同源策略（SOP）是一種約定，是瀏覽器最核心的也是最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到 XSS、CSFR等攻擊。

協議+域名+端口號，三者都相同時就是同源，只要有一個不同就是跨域。

1.2、為什么會產生跨域？

很久以前，前端一般只是切圖，將設計圖實現成靜態網頁，然后交給后端程序員，后端負責數據交互，將后端和前端代碼混合開發。前端和后端是僅僅聯系在一起，不便于開發和維護，后來逐步實現前后端分離，把服務器拆分成三部分：

• WEB 服務器：存放靜態資源
• 后臺服務器：提供業務邏輯和數據分析。
• 圖片服務器

此時就出現請求跨域問題了。

二、跨域解決方案

跨域解決方案總共有 9 種，它們分別為：

通過 JSONP 跨域

CORS 跨域資源共享

http proxy 代理

nginx 反向代理

postMessage 跨域

Websocket

iframe + document.domain

iframe + window.name

iframe + location.hash

三、具體實現方案

3.1、JSONP

html頁面開發時，我們經常會使用 script、img、link、iframe 標簽引入對應的資源，我們發現它們有個共同特點就是可以引入任意域名下的資源，不存在跨域問題。因此我們利用 script 的特點，創建一個帶網址的跨域通信。

具體的實現過程如圖：

原生請求代碼為例如下：

// 注意 -- 函數聲明放前邊 <script>function back(res){console.log(res)//返回數據} </script> <script src="http://127.0.0.1:3000/login?user='111'&callback=back"></script>

node服務代碼為：

var querystring = require('querystring'); var http = require('http'); var server = http.createServer(); server.on('request', function(req, res) {console.log(req.url.split)var params = querystring.parse(req.url.split('?')[1]);console.log('params',params)var fn = params.callback;// jsonp返回設置res.writeHead(200, { 'Content-Type': 'text/javascript' });res.write(fn + '(' + JSON.stringify(params) + ')');res.end(); }); server.listen('3000');

運行服務執行成功之后就會打印出：

{callback: "back"user: "'111'" }

JSONP 的缺點：只允許處理 get 請求，由于請求的數據都暴露在url中，容易被劫持，安全性很差，所以不推薦使用。

3.2、CORS 跨域資源共享

通過設置響應頭處理的，需要后臺配合處理。如果只是普通跨域請求，前端無需設置，后臺設置
Access-Control-Allow-Origin，如：

/* 允許所有域名訪問 */ response.setHeader("Access-Control-Allow-Origin","*");/* 只允許某個域名訪問 */ header("Access-Control-Allow-Origin: www.xxx.xom");

如果需要帶cookie請求，前端也需要設置字段。如：

// 前端設置是否帶cookie xhr.withCredentials = true;

特點：客戶端發送(ajax fetch)請求，后臺設置請求頭相關信息，允許哪些源請求數據，需要處理 options 試探性請求。

3.3、proxy 代理

因為服務器間的數據交互沒有跨域限制，所以通過一個中間代理服務器請求目標服務器的數據，也就是前端服務器發送請求到代理服務器，代理服務器再請求目標服務器，將數據返回給前端服務器。

我們現在常用的三方框架 VUE、React項目中跨域解決方案都使用的是代理。如config.js中代理配置如下：

proxy: { //配置跨域'/': {target: 'http://www.xxxx.com/', //線上changOrigin: true, //允許跨域pathRewrite: {'^/': ''}}, }

3.4、nginx反向代理

nginx反向代理，只需要后臺配置服務就可以了，前端無需任何操作。其原理是：瀏覽器將請求發送到反向代理服務器，由反向代理服務器去選擇目標服務器獲取數據，再返回給瀏覽器，此時暴露的是代理服務器的地址，隱藏了真實的服務器地址。

3.5、postMessage

postMessage 是全局對象 window 的屬性之一。可以安全地實現跨域通信。通常，對于兩個不同頁面的腳本，只有當執行它們的頁面位于具有相同的協議（通常為https），端口號（443為https的默認值），以及主機 (兩個頁面的模數?Document.domain設置為相同的值) 時，這兩個腳本才能相互通信。window.postMessage()?方法提供了一種受控機制來規避此限制，只要正確地使用，這種方法就很安全。

使用語法：

window.postMessage(data,url)

具體實現案例如下：

// a頁面 -- http://localhost:1000/a.html <iframe id="iframe" src="http://localhost:2000/b.html" style="display:none;"></iframe> <script> var iframe = document.getElementById('iframe');iframe.onload = function() {// 向 b 傳送跨域數據iframe.contentWindow.postMessage('傳輸數據', 'http://localhost:2000');};// 接受 b 返回數據window.addEventListener('message', function(e) {alert('接收返回數據 ---> ' + e.data);}, false); </script>// b頁面 -- http://localhost:2000/b.html <script>// 接收 a 的數據window.addEventListener('message', function(e) {alert('data from domain1 ---> ' + e.data);var data = JSON.parse(e.data);if (data) {data.number = 16;// 處理后再發回domain1window.parent.postMessage(JSON.stringify(data), 'http://localhost:1000/');}}, false); </script>

3.6、webSocket

Websocket 是 html5一種新協議，實現瀏覽器與服務器互相通信，同時還允許跨域通訊。原生的 Websocket 可點擊?《WebSocket 基礎教程》學習更多知識。websocket api使用起來不便，我們更多地使用它的封裝版 socket.io，使用簡單，易操作。

具體的實現方法，請點擊《一文讀懂 WebSocket 原理》。

3.7、iframe + document.domain

只能實現同一個主域，不同子域之間的跨域通信。

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

缺點：限制較多。可作為了解就行。

3.8、iframe + location.hash

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

必須要 3 個頁面。

具體實現：A域：a.html -> B域：b.html -> A域：c.html，a與b不同域只能通過hash值單向通信，b與c也不同域也只能單向通信，但c與a同域，所以c可通過parent.parent訪問a頁面所有對象。

3.9、iframe + window.name

與上3.8類似，也需要3個頁面。

實現原理：a.html 和 proxy.html必須在一個源內，b.html在另外一個源內，a與b實現跨域通信，就是借助 第三個 proxy.html 頁面，先把地址重新指向到同源中。proxy.html是一個空頁面，什么也不用處理。

總結

以上是生活随笔為你收集整理的前后端数据交互(七)——前端跨域解决方案(全)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。