專案實戰之跨域處理~一文搞定所有跨域需求

什麼是跨域？

跨域，是指瀏覽器不能執行其他網站的指令碼。它是由瀏覽器的同源策略造成的，是瀏覽器對JavaScript實施的安全限制。

什麼是同源策略？

同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，它是由Netscape提出的一個著名的安全策略。

同源策略是瀏覽器的行為，是為了保護本地資料不被JavaScript程式碼獲取回來的資料汙染，因此攔截的是客戶端發出的請求回來的資料接收，即請求傳送了，伺服器響應了，但是無法被瀏覽器接收。

其主要限制以下幾個方面：

• Cookie 、LocalStorage 和 IndexDB無法讀取
• 無法獲取或操作另一個資源的DOM
• AJAX請求不能傳送

那麼什麼是同源呢？所謂的同源，就是指兩個頁面具有相同的協議，主機（也常說域名），埠，三個要素缺一不可。這樣可能不是很好理解，下面通過表格對比幫助大家理解：

urlA	urlB	說明	是否允許通訊
http://www.monkey.com/js/a.js	http://www.monkey.com/js/b.js	協議、域名、埠、路徑都相同，檔案不同	允許
http://www.monkey.com/a.js	http://www.monkey.com/js/b.js	協議、域名、埠相同，路徑、檔案不同	允許
http://www.monkey.com/js/a.js	http://www.monkey.com：3000/js/b.js	協議、域名相同、埠不同	不允許
http://www.monkey.com/js/a.js	https://www.monkey.com/js/b.js	域名相同、埠相同，協議不同	不允許
http://www.monkey.com/js/a.js	http://192.168.0.118/js/b.js	域名和域名對應的ip地址	不允許
http://www.monkey.com/a.js	http://monkey.com/b.js	主域相同，子域不同	不允許
http://www.monkey.com/a.js	http://www.monkey1.com/b.js	不同域名	不允許

此時，不允許同通訊的頁面之間想要實現通訊，就要使用到跨域了。

常見跨域方案

• 1、 通過jsonp跨域
• 2、 document.domain+iframe跨域
• 3、 location.hash + iframe
• 4、 window.name + iframe跨域
• 5、 postMessage跨域
• 6、 跨域資源共享（CORS）
• 7、 nginx代理跨域
• 8、 nodejs中介軟體代理跨域
• 9、 WebSocket協議跨域

jsonp跨域

在頁面中通過script標籤載入資源，是被瀏覽器所允許的，也不存在跨域的問題，基於這一原理，我們可以通過動態的建立過script標籤，然後src賦值一個帶參的url，進而實現跨域,也叫jsonp跨域。實現方式如下：

原生實現方式

function callback(res){
    console.log(res)//介面返回值
}

let jsonp = document.createElement('script');
jsonp.src = 'http:/www.monkey.com/admin/getUser?name=小燕子&callback=callback';

document.getElementsByTagName('head')[0].appendChild(jsonp);//新增到頁面中

jsonp.remove();//從頁面中移除

jQuery實現

• 第一種：$.ajax()方法

$.ajax({
    url:'http:/www.monkey.com/admin/getUser',
    dataType:"jsonp",
    jsonp: "callback",//請求時路徑引數名
    jsonpCallback:"callback",//設定後端返回函式名
    success:function(data){//回撥函式
        console.log(data);
    }
});

• 第二種：$.get()方法

$.get('http:/www.monkey.com/admin/getUser', {各種資料}, function(data) {
    console.log(data);
}, 'jsonp');

推薦使用$.get()方法

後端node.js核心程式碼示例：

// jsonp返回設定
res.writeHead(200,{'Content-Type':'text/javascript'});
res.write(callback+'('+JSON..stringify(response) + ')');

jsonp跨域只能實現get請求

document.domain+iframe跨域

運用此方法跨域必須有個前提：

這兩個域名必須屬於同一個一級域名!而且所用的協議，埠都要一致，否則無法利用document.domain進行跨域。

Javascript出於對安全性的考慮，而禁止兩個或者多個不同域的頁面進行互相操作。
而相同域的頁面在相互操作的時候不會有任何問題。

實現方式：

• 父頁面（http://www.monkey.com/a.html）

<iframe id='iframe' src='http://monkey.com/b.html'></iframe>

<script>
    document.domain = 'monkey.com';
    var name = 'monkeysoft'
</script>

• 子頁面（http://monkey.com/b.html）

<script>
    document.domain = 'monkey.com';
    console.log(window.parent.name)//monkeysoft
</script>

location.hash + iframe

當兩個不同域的頁面之間想要實現通訊的時候，可以通過與其中一個頁面同域的第三個頁面實現。因為改變hash值，不會重新整理頁面，所以可以通過hash值進行傳遞引數。

畫個草圖幫助理解：

實現方式：

• a.html(http://www.monkey.com/a.html)

<iframe id="iframe" src="http://www.monkey1.com/b.html" style="display:none;"></iframe>

<script>
    var iframe = document.getElementById('iframe');

    // 向b.html傳hash值
    setTimeout(function() {
        iframe.src = iframe.src + '#name=monkey';
    }, 1000);
    
    // 開放給同域c.html的回撥方法
    function onCallback(res) {
        console('data from c.html ---> ' + res);
    }
</script>

• b.html(http://www.monkey1.com/b.html)

<iframe id="iframe" src="http://www.monkey.com/c.html" style="display:none;"></iframe>

<script>
    var iframe = document.getElementById('iframe');

    // 監聽a.html傳來的hash值，再傳給c.html
    window.onhashchange = function () {
        iframe.src = iframe.src + location.hash;
    };
</script>

• c.html(http://www.monkey.com/c.html)

<script>
    // 監聽b.html傳來的hash值
    window.onhashchange = function () {
        // 再通過操作同域a.html的js回撥，將結果傳回
        window.parent.parent.onCallback('hello: ' + location.hash.replace('#name=', ''));
    };
</script>

此方法有個缺點，就是所有傳遞的資料都暴露在了url中。

window.name + iframe跨域

window.name的值再不同的頁面（包括不同域名）載入後依然存在，並且支援的資料量非常可觀，最大2MB。

簡單來說就是頁面重新整理之後，window.name值依舊存在

因此我們可以基於這個原理，我們可以巧妙的實現跨域，並且同時它也是安全操作。

實現方式：

• a.html(http://www.monkey.com/a.html)

var proxy = function(url, callback) {
    var state = 0;
    var iframe = document.createElement('iframe');

    // 載入跨域頁面
    iframe.src = url;

    // onload事件會觸發2次，第1次載入跨域頁，並留存資料於window.name
    iframe.onload = function() {
        if (state === 1) {
            // 第2次onload(同域proxy頁)成功後，讀取同域window.name中資料
            callback(iframe.contentWindow.name);
            destoryFrame();

        } else if (state === 0) {
            // 第1次onload(跨域頁)成功後，切換到同域代理頁面
            iframe.contentWindow.location = 'http://www.domain1.com/proxy.html';
            state = 1;
        }
    };

    document.body.appendChild(iframe);

    // 獲取資料以後銷燬這個iframe，釋放記憶體；這也保證了安全（不被其他域frame js訪問）
    function destoryFrame() {
        iframe.contentWindow.document.write('');
        iframe.contentWindow.close();
        document.body.removeChild(iframe);
    }
};

// 請求跨域b頁面資料
proxy('http://www.domain2.com/b.html', function(data){
    alert(data);
});

• proxy.html(http://www.monkey.com/proxy.html)

中間代理頁，與a.html同域，內容為空即可。

• b.html(http://www.monkey1.com/b.html)

<script>
    window.name = 'monkey1';
</script>

postMessage跨域

隨著HTML5的發展，html5工作組提供了兩個重要的介面：postMessage(send) 和 onmessage。這兩個介面有點類似於websocket，可以實現兩個跨域站點頁面之間的資料傳遞。

postMessage(data,origin),接收兩個引數：

data是傳輸的資料，部分瀏覽器只支援字串，因此最好傳參時使用JSON.stringify()序列化。

origin： 協議+主機+埠號，也可以設定為"*"，表示可以傳遞給任意視窗，如果要指定和當前視窗同源的話設定為"/"。

實現方式：

• a.html(http://www.monkey.com/a.html)

<iframe id="iframe" src="http://www.monkey1.com/b.html" style="display:none;"></iframe>
<script>       
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: 'monkeysoft'
        };
        // 向monkey1傳送跨域資料
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.monkey1.com');
    };

    // 接受monkey1返回資料
    window.addEventListener('message', function(e) {
        alert('data from monkey1 ---> ' + e.data);
    }, false);
</script>

• b.html(http://www.monkey1.com/b.html)

<script>
    // 接收monkey的資料
    window.addEventListener('message', function(e) {
        alert('data from monkey ---> ' + e.data);

        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;
            // 處理後再發回monkey
            window.parent.postMessage(JSON.stringify(data), 'http://www.monkey.com');
        }
    }, false);
</script>

跨域資源共享（CORS）

只需要服務端設定Access-Control-Allow-Origin即可，前端無須設定

nginx反向代理跨域

nginx在本地搭建一個服務向遠端伺服器請求資料，前提是前後端分離的條件下，這樣後端可以上傳他的介面到伺服器，或者你可以訪問後臺本地的環境也是可以的。

• 下載nginx

http://nginx.org/en/download.html

下載任意一個版本即可，我下載的是nginx-1.12.2，下載之後解壓即可。

• 配置代理

server {
        listen       8080;
        server_name  localhost;
        
        #charset koi8-r;
        access_log  logs/k8s.log;
        
        location / {
            root   D:/_test/front/app;  #你專案的根目錄
            index  index.html index.htm;
        }
        
        ## 使用者訪問 localhost/api，則反向代理到http://www.monkeysoft.com
        location /api/ {
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header Host  $http_host;
            proxy_set_header X-Nginx-Proxy true;
            proxy_set_header Connection "";
            proxy_pass   http://www.monkeysoft.com;  #****這裡填上伺服器地址
            proxy_redirect default ;
        }
}

• 啟動服務

配置好了啟動nginx伺服器就好了。在這裡整理一些windows常用的命令：

1、啟動：
D:\nginx-1.12.2>start nginx或
D:\nginx-1.12.2>nginx.exe

2、停止：
D:\nginx-1.12.2>nginx.exe -s stop或
D:\nginx-1.12.2>nginx.exe -s quit
注：stop是快速停止nginx，可能並不儲存相關資訊；quit是完整有序的停止nginx，並儲存相關資訊。

3、重新載入Nginx：
D:\nginx-1.12.2>nginx.exe -s reload
當配置資訊修改，需要重新載入這些配置時使用此命令。


4、重新開啟日誌檔案：
D:\nginx-1.12.2>nginx.exe -s reopen

5、檢視Nginx版本：
D:\nginx-1.12.2>nginx -v

伺服器代理跨域

伺服器代理一般是通過node中介軟體http-proxy-middleware實現的，在vue、react腳手架中，已經整合了該中介軟體，我們只需要配置使用既可。

webpack配置檔案部分程式碼：

devServer: {
    proxy: {
      '/api': {
        target: 'http://www.monkey.com:8080',//真實請求地址
        changeOrigin: true, // 預設false，是否需要改變原始主機頭為目標URL
        ws: true,// 是否代理websocket
        pathRewrite: {//重寫路徑
          '^/api': ''
        },
        router: {
             // 如果請求主機 == 'dev.localhost:3000',
             // 重寫目標伺服器 'http://www.example.org' 為 'http://localhost:8000'
             'dev.localhost:3000' : 'http://localhost:8000'
        }
      },
    }
},

WebSocket協議跨域。

WebSocket protocol是HTML5一種新的協議。它實現了瀏覽器與伺服器全雙工通訊，同時允許跨域通訊，是server push技術的一種很好的實現。

實現方式

頁面端（客戶端）：

<script>
    var ws = new WebSocket('ws://localhost:8080');
    ws.onmessage = function (message) {
        console.log(message);//接收訊息
        
    };
    
    
    //傳送訊息
    var message = {
        name:'monkeysoft'
    }
    
    ws.send(JSON.stringify(message));
</script>

服務端（node）：

//引入http標準模組,CommonJS模組

const http = require("http");
const fs = require("fs");
const ws = require("socket.io");

//建立一個web服務

const server  = http.createServer(function(request,response){
  response.writeHead(200,{
    "Content-type":"text/html;charset=UTF-8"
  })
    // 可傳送文字
    // response.end("hello world");
    
    // 可自動解析html
     response.end("<h1>我是標題2</h1>");
}) 

//基於當前web服務開啟socket例項
const io = ws(server)

//檢測連線事件
io.on("connection",function(socket){

  //接收客戶端所傳送的訊息
  socket.on("message",function(message){
    console.log(message)
    //向所有客戶端廣播該訊息
    io.emit("message",message)
  })
  //監聽到斷開連結
  socket.on("disconnect",function(){
    //傳送廣播  某使用者離開了群聊
    
  })
})

//服務端監聽埠
 server.listen(8080)

參考:

1、前端常見跨域解決方案（全） https://segmentfault.com/a/1190000011145364

2、前端專案中nginx 本地反向代理配置 https://www.jianshu.com/p/5c23b09d443f