什麼是跨域？跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這裡跨域是廣義的。其實我們通常所說的跨域是狹義的，是由瀏覽器同源策略限制的一類請求場景。為什麼會跨域？吶，說起跨域就不得不提一下同源策略，那什麼是同源策略呢？同源策略（瀏覽器提供的一種安全的運行環境）同源策略限制了從同一 ...

什麼是跨域？

跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這裡跨域是廣義的。其實我們通常所說的跨域是狹義的，是由瀏覽器同源策略限制的一類請求場景。

為什麼會跨域？

吶，說起跨域就不得不提一下同源策略，那什麼是同源策略呢？

同源策略（瀏覽器提供的一種安全的運行環境）

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

同源策略限制以下幾種行為：

Cookie、LocalStorage 和 IndexDB 無法讀取
DOM 和 Js對象無法獲得
AJAX 請求不能發送

倘若沒有了同源策略限制的介面請求，很容易受到 `CSRF` 攻擊和 `XSS` 攻擊

倘若沒有了同源策略限制的Dom查詢，會很容易被竊取信息

所謂同源是指"協議+功能變數名稱+埠"三者相同，即便兩個不同的功能變數名稱指向同一個ip地址，也非同源。

什麼場景會跨域？

要說起跨域產生的場景，就不得不要瞭解一下URL地址了

`http://username:[email protected]:8080/news/index.asp?boardID=5&ID=24618&page=1#name`

一個完整URL包含一下幾部分：

協議部分 protocol：該URL的協議部分為 http，這代表網頁使用的是HTTP協議。在Internet中可以使用多種協議，如 HTTPS ， FTP ，FILE 等。在 HTTP 後面的 // 為分隔符
驗證 authentication ：該URL的協議部分為 username:password ，這種 URL 是不贊成使用的。原因看這裡O(∩_∩)O
功能變數名稱部分（主機地址） hostname ：該URL的協議部分為 www.kuayu.com，一個URL中，也可以使用IP地址作為功能變數名稱使用
埠部分 port ：該URL的埠部分為 8080，跟在功能變數名稱後面的是埠，功能變數名稱和埠之間使用 : 作為分隔符。埠不是一個URL必須的部分，如果省略埠部分，將採用預設埠80
虛擬目錄部分 :該URL的虛擬目錄為 /news/，從功能變數名稱後的第一個 / 開始到最後一個 / 為止，是虛擬目錄部分。虛擬目錄也不是一個URL必須的部分。
路徑部分 pathname : 該URL的路徑部分為 index.asp，從功能變數名稱後的最後一個 / 開始到 ？ 為止，是文件名部分，如果沒有 ? ，則是從功能變數名稱後的最後一個 / 開始到 # 為止，是文件部分，如果沒有 ？ 和 # ，那麼從功能變數名稱後的最後一個 / 開始到結束，都是文件名部分。文件名部分也不是一個URL必須的部分，如果省略該部分，則使用預設的文件名
查詢(參數)部分 serarch : 該URL的查詢部分為 boardID=5&ID=24618&page=1，從 ？ 開始到 # 為止之間的部分為參數部分，又稱搜索部分、查詢部分。參數可以允許有多個參數，參數與參數之間用 & 作為分隔符。
錨部分 : 該URL的錨部分為 name，從“#”開始到最後，都是錨部分。錨部分也不是一個URL必須的部分

好了，話題拉回來，讓我們來看一下跨域的場景

URL	說明	是否允許通信
http://www.domain.com/a.js	同一功能變數名稱，不同文件或路徑	允許
http://www.domain.com/b.js
http://www.domain.com/lab/c.js

http://www.domain.com:8000/a.js	同一功能變數名稱，不同埠	不允許
http://www.domain.com/b.js	同一功能變數名稱，不同埠	不允許

http://www.domain.com/a.js	同一功能變數名稱，不同協議	不允許
https://www.domain.com/b.js	同一功能變數名稱，不同協議	不允許

http://www.domain.com/a.js	功能變數名稱和功能變數名稱對應相同ip	不允許
http://192.168.4.12/b.js	功能變數名稱和功能變數名稱對應相同ip	不允許

http://www.domain.com/a.js	主域相同，子域不同	不允許
http://x.domain.com/b.js
http://domain.com/c.js

http://www.domain1.com/a.js	不同功能變數名稱	不允許
http://www.domain2.com/b.js	不同功能變數名稱	不允許

怎麼解決跨域？

1. `jsonp`

JSONP：JSON 的一種“使用模式”，可用於解決主流瀏覽器的跨域數據訪問的問題。由於同源策略，一般來說位於 server1.example.com 的網頁無法與不是 server1.example.com 的伺服器溝通，而 HTML 的 <script> 元素是一個例外。利用 <script> 元素的這個開放策略，網頁可以得到從其他來源動態產生的 JSON 資料，而這種使用模式就是所謂的 JSONP 。用 JSONP 抓到的資料並不是 JSON ，而是任意的 JavaScript ，用 JavaScript 直譯器執行而不是用 JSON 解析器解析。 - 選自百度百科

前端代碼：

$('#btn').click(function(){
    var frame = document.createElement('script');
    frame.src = 'http://localhost:5000/jsonp?name=aaron&age=18&callback=query';
    $('body').append(frame);
});

function query(res){
    console.log(res.message+res.name+'你已經'+res.age+'歲了');
}

後端代碼：

router.get('/jsonp', (req, res) => {
    let {name,age,callback} = req.query;
    let data = {message:'success',name,age};
    data = JSON.stringify(data);
    res.end(`${callback}(${data})`);
});

jsonp缺點：只能實現get一種請求。

2. `document.domain + iframe`

此方案僅限主域相同，子域不同的跨域應用場景。

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

<!--父視窗：(http://www.domain.com/a.html)-->
<iframe id="iframe" src="http://child.domain.com/b.html"></iframe>
<script>
    document.domain = 'domain.com';
    var user = 'admin';
</script>

<!--子視窗：(http://child.domain.com/b.html)-->
<script>
    document.domain = 'domain.com';
    // 獲取父視窗中變數
    alert('get js data from parent ---> ' + window.parent.user);
</script>

3. `location.hash + iframe`

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

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

<!--a.html：(http://www.domain1.com/a.html)-->
<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>
    var iframe = document.getElementById('iframe');

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

<!--b.html：(http://www.domain2.com/b.html)-->
<iframe id="iframe" src="http://www.domain1.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.domain1.com/c.html)-->
<script>
    // 監聽b.html傳來的hash值
    window.onhashchange = function () {
        // 再通過操作同域a.html的js回調，將結果傳回
        window.parent.parent.onCallback('hello: ' + location.hash.replace('#user=', ''));
    };
</script>

4. `indow.name + iframe`

window.name屬性的獨特之處：name值在不同的頁面（甚至不同功能變數名稱）載入後依舊存在，並且可以支持非常長的 name 值

<!--a.html：(http://www.domain1.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.domain1.com/proxy....-->
中間代理頁，與a.html同域，內容為空即可。

b.html：(http://www.domain2.com/b.html)
<script>
    window.name = 'This is domain2 data!';
</script>

5. `postMessage`

這是由H5提出來的一個炫酷的API，IE8+，chrome,ff都已經支持實現了這個功能。這個功能也是非常的簡單，其中包括接受信息的Message時間，和發送信息的postMessage方法。

postMessage() 方法接受兩個參數:

data：html5規範支持任意基本類型或可複製的對象，但部分瀏覽器只支持字元串，所以傳參時最好用JSON.stringify()序列化。
origin：協議+主機+埠號，也可以設置為"*"，表示可以傳遞給任意視窗，如果要指定和當前視窗同源的話設置為"/"。

<!--a.html：(http://www.domain1.com/a.html)-->
<iframe id="iframe" src="http://www.domain2.com/b.html" style="display:none;"></iframe>
<script>       
    var iframe = document.getElementById('iframe');
    iframe.onload = function() {
        var data = {
            name: 'aym'
        };
        // 向domain2傳送跨域數據
        iframe.contentWindow.postMessage(JSON.stringify(data), 'http://www.domain2.com');
    };

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

<!--b.html：(http://www.domain2.com/b.html)-->
<script>
    // 接收domain1的數據
    window.addEventListener('message', function(e) {
        alert('data from domain1 ---> ' + e.data);

        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;

            // 處理後再發回domain1
            window.parent.postMessage(JSON.stringify(data), 'http://www.domain1.com');
        }
    }, false);
</script

6. `跨域資源共用（CORS）`

CORS：全稱"跨域資源共用"（Cross-origin resource sharing）。CORS需要瀏覽器和伺服器同時支持，才可以實現跨域請求，目前幾乎所有瀏覽器都支持 CORS ，IE則不能低於 IE10 。 CORS 的整個過程都由瀏覽器自動完成，前端無需做任何設置，跟平時發送 ajax 請求並無差異。 CORS 的關鍵在於伺服器，只要伺服器實現 CORS 介面，就可以實現跨域通信。

所有 CORS 相關的的頭都是 Access-Control 為首碼的。下麵是每個頭的一些細節。

欄位	描述
Access-Control-Allow-Methods	該欄位必需，它的值是逗號分隔的一個字元串，表明伺服器支持的所有跨域請求的方法。註意，返回的是所有支持的方法，而不單是瀏覽器請求的那個方法。這是為了避免多次"預檢"請求
Access-Control-Allow-Headers	如果瀏覽器請求包括Access-Control-Request-Headers欄位，則Access-Control-Allow-Headers欄位是必需的。它也是一個逗號分隔的字元串，表明伺服器支持的所有頭信息欄位，不限於瀏覽器在"預檢"中請求的欄位
Access-Control-Allow-Credentials	該欄位與簡單請求時的含義相同。
Access-Control-Max-Age	該欄位可選，用來指定本次預檢請求的有效期，單位為秒。上面結果中，有效期是20天（1728000秒），即允許緩存該條回應1728000秒（即20天），在此期間，不用發出另一條預檢請求。

import express from "express";
import cors from "cors";

const app = express()
const
var corsOptions = {
  origin: 'http://example.com',
  optionsSuccessStatus: 200
}
 
app.get('/products/:id', cors(corsOptions), (req, res, next) => {
  res.json({msg: 'This is CORS-enabled for only example.com.'})
})
 
app.listen(80, function () {
  console.log('啟用corba,埠:80')
})

使用 CORS 簡單請求，非常容易，對於前端來說無需做任何配置，與發送普通 ajax 請求無異。唯一需要註意的是，需要攜帶 cookie 信息時，需要將 withCredentials 設置為 true 即可。 CORS 的配置，完全在後端設置，配置起來也比較容易，目前對於大部分瀏覽器相容性也比較好，現在應用最多的就是 CORS 解決跨域了。

7. `nginx代理跨域`

nginx配置解決iconfont跨域

瀏覽器跨域訪問js、css、img等常規靜態資源被同源策略許可，但iconfont字體文件(eot|otf|ttf|woff|svg)例外，此時可在nginx的靜態資源伺服器中加入以下配置。

location / {
  add_header Access-Control-Allow-Origin *;
}

nginx反向代理介面跨域

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

實現思路：通過nginx配置一個代理伺服器（功能變數名稱與domain1相同，埠不同）做跳板機，反向代理訪問domain2介面，並且可以順便修改cookie中domain信息，方便當前域cookie寫入，實現跨域登錄。

nginx具體配置：

#proxy伺服器
server {
    listen       81;
    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;
    }
}

前端代碼：

var xhr = new XMLHttpRequest();

// 前端開關：瀏覽器是否讀寫cookie
xhr.withCredentials = true;

// 訪問nginx中的代理伺服器
xhr.open('get', 'http://www.domain1.com:81/?user=admin', true);
xhr.send();

Nodejs後臺：

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...');

8. `nodejs中間件代理跨域`

node中間件實現跨域代理，是通過啟一個代理伺服器，實現數據的轉發，也可以通過設置cookieDomainRewrite參數修改響應頭中cookie中功能變數名稱，實現當前域的cookie寫入，方便介面登錄認證。
利用node + express + http-proxy-middleware搭建一個proxy伺服器

前端代碼：

var xhr = new XMLHttpRequest();

// 前端開關：瀏覽器是否讀寫cookie
xhr.withCredentials = true;

// 訪問http-proxy-middleware代理伺服器
xhr.open('get', 'http://www.domain1.com:3000/login?user=admin', true);
xhr.send();

後端代碼：

var express = require('express');
var proxy = require('http-proxy-middleware');
var app = express();

app.use('/', proxy({
    // 代理跨域目標介面
    target: 'http://www.domain2.com:8080',
    changeOrigin: true,

    // 修改響應頭信息，實現跨域並允許帶cookie
    onProxyRes: function(proxyRes, req, res) {
        res.header('Access-Control-Allow-Origin', 'http://www.domain1.com');
        res.header('Access-Control-Allow-Credentials', 'true');
    },

    // 修改響應信息中的cookie功能變數名稱
    cookieDomainRewrite: 'www.domain1.com'  // 可以為false，表示不修改
}));

app.listen(3000);
console.log('Proxy server is listen at port 3000...');

9. `WebSocket協議跨域`

WebSocket protocol是HTML5一種新的協議。它實現了瀏覽器與伺服器全雙工通信，同時允許跨域通訊，是server push技術的一種很好的實現。
原生WebSocket API使用起來不太方便，我們使用 Socket.io ，它很好地封裝了webSocket介面，提供了更簡單、靈活的介面，也對不支持webSocket的瀏覽器提供了向下相容。

前端代碼：

<div>user input：<input type="text"></div>
<script src="https://cdn.bootcss.com/socket.io/2.2.0/socket.io.js"></script>
<script>
var socket = io('http://www.domain2.com:8080');

// 連接成功處理
socket.on('connect', function() {
    // 監聽服務端消息
    socket.on('message', function(msg) {
        console.log('data from server: ---> ' + msg); 
    });

    // 監聽服務端關閉
    socket.on('disconnect', function() { 
        console.log('Server socket has closed.'); 
    });
});

document.getElementsByTagName('input')[0].onblur = function() {
    socket.send(this.value);
};
</script>

Nodejs socket後臺：

var http = require('http');
var socket = require('socket.io');

// 啟http服務
var server = http.createServer(function(req, res) {
    res.writeHead(200, {
        'Content-type': 'text/html'
    });
    res.end();
});

server.listen('8080');
console.log('Server is running at port 8080...');

// 監聽socket連接
socket.listen(server).on('connection', function(client) {
    // 接收信息
    client.on('message', function(msg) {
        client.send('hello：' + msg);
        console.log('data from client: ---> ' + msg);
    });

    // 斷開處理
    client.on('disconnect', function() {
        console.log('Client socket has closed.'); 
    });
});

參考大神文章：

熟悉的陌生人——跨域

什麼是跨域？

為什麼會跨域？

同源策略（瀏覽器提供的一種安全的運行環境）

倘若沒有了同源策略限制的介面請求，很容易受到 CSRF 攻擊和 XSS 攻擊

倘若沒有了同源策略限制的Dom查詢，會很容易被竊取信息

什麼場景會跨域？

http://username:[email protected]:8080/news/index.asp?boardID=5&ID=24618&page=1#name

怎麼解決跨域？

1. jsonp

2. document.domain + iframe

3. location.hash + iframe

4. indow.name + iframe

5. postMessage

6. 跨域資源共用（CORS）

7. nginx代理跨域

nginx配置解決iconfont跨域

nginx反向代理介面跨域

8. nodejs中間件代理跨域

9. WebSocket協議跨域

參考大神文章：

倘若沒有了同源策略限制的介面請求，很容易受到 `CSRF` 攻擊和 `XSS` 攻擊

`http://username:[email protected]:8080/news/index.asp?boardID=5&ID=24618&page=1#name`

1. `jsonp`

2. `document.domain + iframe`

3. `location.hash + iframe`

4. `indow.name + iframe`

5. `postMessage`

6. `跨域資源共用（CORS）`

7. `nginx代理跨域`

8. `nodejs中間件代理跨域`

9. `WebSocket協議跨域`