前端面試總結之：js跨域問題

金三銀四，這會到了招聘的高峰期，最近很多朋友都向我發來了面試題，特此來自我留下筆記和分享，希望對大家有幫助，有所提升。

什麼是跨域？

我們經常會看到上邊類似的報錯，Access-Cotrol-Allow-Origin 這是典型的跨域報錯。其實我們通常所說的跨域是狹義的，是由浏覽器同源政策限制的一類請求場景。那什麼是同源政策呢？

什麼是同源政策？

浏覽器安全的基石是"同源政策"（same-origin policy）。 Netscape 公司引入浏覽器。目前，所有浏覽器
都實行這個政策。
所謂同源是指"協定+域名+端口"三者相同，即便兩個不同的域名指向同一個ip位址，也非同源。
它是浏覽器最核心也最基本的安全功能，如果缺少了同源政策，浏覽器很容易受到XSS、CSFR等攻擊。
複制代碼           

所謂"同源"指的是"三個相同"。

協定相同域名相同端口相同複制代碼           

舉例：

舉例來說，

http://www.a.com:3000/index.html

這個網址，協定是

http://

，域名是

www.a.com

，端口是

3000

（我們經常看的網址沒有，是因為預設端口80可以省略）。

常見跨域場景

URL                                      說明                    是否允許通信
http://www.a.com/a.js
http://www.a.com/b.js         同一域名，不同檔案或路徑           允許,屬于同源
http://www.a.com/lab/c.js

http://www.a.com:8000/a.js
http://www.a.com/b.js         同一域名，不同端口                不允許
 
http://www.a.com/a.js
https://www.a.com/b.js        同一域名，不同協定                不允許
 
http://www.a.com/a.js
http://192.168.4.12/b.js      域名和域名對應相同ip              不允許
 
http://www.a.com/a.js
http://x.a.com/b.js           主域相同，子域不同                不允許
http://a.com/c.js
 
http://www.a.com/a.js
http://www.a.com/b.js         不同域名                         不允許複制代碼           

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

（1） Cookie、LocalStorage 和 IndexDB 無法讀取。（2） DOM 無法獲得。（3） AJAX 請求不能發送。複制代碼           

跨域解決方案

1、 通過jsonp跨域
2、CORS
3、 document.domain + iframe跨域
4、 location.hash + iframe
5、 window.name + iframe跨域
6、 postMessage跨域
7、 nginx代理跨域
8、 nodejs中間件代理跨域
9、 WebSocket協定跨域
複制代碼           

1.通過jsonp跨域

通常為了減輕web伺服器的負載，我們把js、css，img等靜态資源分離到另一台獨立域名的伺服器上，在html頁面中再通過相應的标簽從不同域名下加載靜态資源，而被浏覽器允許，基于此原理，我們可以通過動态建立script，再請求一個帶參網址實作跨域通信。jsonp正是利用這個特性來實作的。 

優缺點：

1. JSONP是伺服器與用戶端跨源通信的常用方法。最大特點就是簡單适用，老式浏覽器全部支援，伺服器改造非常小。
2. 隻能實作get一種請求、不安全 容易遭到xss攻擊

例子：如我們在百度搜尋時，會發現百度調用也是通過jsonp來實作的。如我在百度搜尋跨域，f12開發模式，Network，中可以發現是通過js來實作如下圖，

那麼我們來模拟調用下這個接口吧。https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/suwd=&json=1&p=3&sid=1460_21119_28205_28131_28266_27245_22159&req=2&bs=%E8%B7%A8%E5%9F%9F&csor=0&cb=jQuery110205514934443247432_1553744466531&_=1553744466532

簡化為：https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show 如下圖也是可以的

<script>        function show(params) {            console.log(params);        }    </script>    <script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=show"></script>

複制代碼           

如下圖，可正常調用輸出：

模拟jsonp代碼：

function jsonp({url,params,cb}) {            return new Promise((resolve, reject) => {                let script = document.createElement('script');                window[cb] = function (params) {                    resolve(params);                }                params = {...params,cb};                let arrs = [];                for(let key in params){                    arrs.push(`${key}=${params[key]}`);                    }                script.src = `${url}?${arrs.join('&')}`;                document.body.appendChild(script);            });        };        jsonp({            url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',            params:{wd:'a'},            cb:'show'        }).then(data=>{            console.log('jsonp跨域請求的資料為：',data);        });複制代碼           

2.）jquery ajax：

$.ajax({
    url: 'https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su',
    type: 'get',
    dataType: 'jsonp',  // 請求方式為jsonp
    jsonpCallback: "show",    // 自定義回調函數名
    data: {wd:'a'}
});
複制代碼           

3.）vue.js：

this.$http.jsonp('https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su', {
    params: {wd:'a'},
  jsonp: 'show'}).then((res) => {
    console.log(res); 
})
複制代碼           

2.CORS

CORS是一個W3C标準，全稱是"跨域資源共享"（Cross-origin resource sharing）它允許浏覽器向跨源伺服器，發出

XMLHttpRequest

請求，進而克服了AJAX隻能 同源使用的限制。

ps：普通跨域請求：隻服務端設定Access-Control-Allow-Origin即可，前端無須設定，若要帶cookie請求：前後端都需要設定。由于同源政策的限制，所讀取的cookie為跨域請求接口所在域的cookie，而非目前頁。

優缺點：

1. 目前，所有浏覽器都支援該功能(IE8+：IE8/9需要使用XDomainRequest對象來支援CORS）)，CORS也已經成為主流的跨域解決方案。
2. 整個CORS通信過程，都是浏覽器自動完成，不需要使用者參與。對于開發者來說，CORS通信與同源的AJAX通信沒有差别，代碼完全一樣。浏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭資訊，有時還會多出一次附加的請求，但使用者不會有感覺。
3. CORS與JSONP的使用目的相同，但是比JSONP更強大。JSONP隻支援

   GET

   請求，CORS支援所有類型的HTTP請求。JSONP的優勢在于支援老式浏覽器，以及可以向不支援CORS的網站請求資料。

兩種請求：

浏覽器将CORS請求分成兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。

隻要同時滿足以下兩大條件，就屬于簡單請求。凡是不同時滿足下面兩個條件，就屬于非簡單請求。

1) 請求方法是以下三種方法之一：HEADGETPOST（2）HTTP的頭資訊不超出以下幾種字段：AcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type：隻限于三個值application/x-www-form-urlencoded、multipart/form-data、text/plain
複制代碼           

簡單請求：

簡單請求，浏覽器直接發出CORS請求。具體來說，就是在頭資訊之中，增加一個

Origin

字段。

非簡單請求：

是那種對伺服器有特殊要求的請求，比如請求方法是

PUT

或

DELETE

，或者

Content-Type

字段的類型是

application/json

。

非簡單請求的CORS請求，會在正式通信之前，增加一次HTTP查詢請求，稱為"預檢"請求（preflight）。

浏覽器先詢問伺服器，目前網頁所在的域名是否在伺服器的許可名單之中，以及可以使用哪些HTTP動詞和頭資訊字段。隻有得到肯定答複，浏覽器才會發出正式的

XMLHttpRequest

請求，否則就報錯。

{ host: 'localhost:4000',
  connection: 'keep-alive',
  'content-length': '0',
  origin: 'http://localhost:3002',
  name: 'lee1',
  'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.181 Safari/537.36',
  accept: '*/*',
  referer: 'http://localhost:3002/2cors.html',
  'accept-encoding': 'gzip, deflate, br',
  'accept-language': 'zh-CN,zh;q=0.9',
  cookie: 'name=lee' }
複制代碼           

（1）Access-Control-Allow-Origin

該字段是必須的。它的值要麼是請求時

Origin

字段的值，要麼是一個

*

，表示接受任意域名的請求。

（2）Access-Control-Allow-Credentials

該字段可選。它的值是一個布爾值，表示是否允許發送Cookie。預設情況下，Cookie不包括在CORS請求之中。設為

true

，即表示伺服器明确許可，Cookie可以包含在請求中，一起發給伺服器。這個值也隻能設為

true

，如果伺服器不要浏覽器發送Cookie，删除該字段即可。

（3）Access-Control-Expose-Headers

該字段可選。CORS請求時，

XMLHttpRequest

對象的

getResponseHeader()

方法隻能拿到6個基本字段：

Cache-Control

、

Content-Language

、

Content-Type

、

Expires

、

Last-Modified

、

Pragma

。如果想拿到其他字段，就必須在

Access-Control-Expose-Headers

裡面指定。上面的例子指定，

getResponseHeader('FooBar')

可以傳回

FooBar

字段的值。

withCredentials 屬性

CORS請求預設不發送Cookie和HTTP認證資訊。如果要把Cookie發到伺服器，一方面要伺服器同意，指定

Access-Control-Allow-Credentials

字段。

Access-Control-Allow-Credentials: true複制代碼           

開發者必須在AJAX請求中打開

withCredentials

屬性。

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;複制代碼           

否則，即使伺服器同意發送Cookie，浏覽器也不會發送。或者，伺服器要求設定Cookie，浏覽器也不會處理。

但是，如果省略

withCredentials

設定，有的浏覽器還是會一起發送Cookie。這時，可以顯式關閉

withCredentials

。

xhr.withCredentials = false;
複制代碼           

需要注意的是，如果要發送Cookie，

Access-Control-Allow-Origin

就不能設為星号，必須指定明确的、與請求網頁一緻的域名。同時，Cookie依然遵循同源政策，隻有用伺服器域名設定的Cookie才會上傳，其他域名的Cookie并不會上傳，且（跨源）原網頁代碼中的

document.cookie

也無法讀取伺服器域名下的Cookie。

（4）Access-Control-Request-Method

該字段是必須的，用來列出浏覽器的CORS請求會用到哪些HTTP方法，上例是

PUT

。

（5）Access-Control-Request-Headers

該字段是一個逗号分隔的字元串，指定浏覽器CORS請求會額外發送的頭資訊字段

Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000複制代碼           

（6）Access-Control-Allow-Methods

該字段必需，它的值是逗号分隔的一個字元串，表明伺服器支援的所有跨域請求的方法。注意，傳回的是所有支援的方法，而不單是浏覽器請求的那個方法。這是為了避免多次"預檢"請求。

（7）Access-Control-Allow-Headers

如果浏覽器請求包括

Access-Control-Request-Headers

字段，則

Access-Control-Allow-Headers

字段是必需的。它也是一個逗号分隔的字元串，表明伺服器支援的所有頭資訊字段，不限于浏覽器在"預檢"中請求的字段。

（8）Access-Control-Allow-Credentials

該字段與簡單請求時的含義相同。

（9）Access-Control-Max-Age

該字段可選，用來指定本次預檢請求的有效期，機關為秒。上面結果中，有效期是20天（1728000秒），即允許緩存該條回應1728000秒（即20天），在此期間，不用發出另一條預檢請求。

模拟：

前端設定js；

a.html頁面中的js

let xhr = new XMLHttpRequest;    document.cookie = 'name=lee'; //cookie  不能跨域    xhr.withCredentials = true; //    xhr.open('PUT','http://localhost:4000/getData',true);    xhr.setRequestHeader('name', 'lee1');    xhr.onreadystatechange = function () {        if(xhr.readyState === 4){            if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {                console.log(xhr.response);            }        }            }    xhr.send();複制代碼           

後端用node模拟：

a.js （ 用于可以http://localhost:3002/a.html來啟動頁面 調用 http://localhost:4000/getData 屬于跨域）

let express = require('express');let app = express();app.use(express.static(__dirname));app.listen(3002);複制代碼           

b.js

let express = require('express');let app = express();let whiteList = ['http://localhost:3002'];
app.use(function (req,res,next) {    let origin = req.headers.origin;    if (whiteList.includes(origin)){        // 設定哪個源可以通路        res.setHeader('Access-Control-Allow-Origin', origin);        // 允許攜帶哪個頭通路我        res.setHeader("Access-Control-Allow-Headers", "name,Content-Type,X-Requested-With");    //    允許攜帶cookie        res.setHeader('Access-Control-Allow-Credentials','true');        // 該次請求的請求方式        res.setHeader("Access-Control-Allow-Methods", "PUT");        //預檢測存活時間        res.setHeader("Access-Control-Max-Age", 1800);        // /允許前端擷取哪個頭        res.setHeader("Access-Control-Expose-Headers", "name");        // option 預檢請求 又是有請求 有時沒有 表示這個請求是用來詢問的        if(req.method === 'OPTIONS'){            res.end();        }    }    next();})app.put('/getData', function (req, res) {    console.log(req.headers);    // res.setHeader('name','hello lee');    res.end(`getData`);});app.get('/getData',function (req,res) {   console.log(req.headers);    res.end(`getData`);});app.use(express.static(__dirname));app.listen(4000);複制代碼           

3.document.domain + iframe跨域

此方案僅限主域相同，子域不同的跨域應用場景(網頁一級域名相同，隻是二級域名不同)。實作原理：兩個頁面都通過js強制設定document.domain為基礎主域，就實作了同域。

1.）父視窗：(www.a.com/a.html)

<iframe id="iframe" src="http://child.a.com/b.html"></iframe>
<script>
    document.domain = 'a.com';
    var user = 'admin';
</script>複制代碼           

2.）子視窗：(child.a.com/b.html)

<script>
    document.domain = 'a.com';
    // 擷取父視窗中變量
    alert('get js data from parent ---> ' + window.parent.user);
</script>複制代碼           

4. location.hash

實作原理： a與b跨域互相通信，通過中間頁c來實作(且c與a是同域)。 三個頁面，不同域之間利用iframe的location.hash傳值，相同域之間直接js通路來通信。

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

1.）a.html：(www.a.com/a.html)

<iframe id="iframe" src="http://www.b.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>複制代碼           

2.）b.html：(www.b.com/b.html)

<iframe id="iframe" src="http://www.a.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>複制代碼           

3.）c.html：(www.a.com/c.html)

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

5.window.name + iframe跨域

浏覽器視窗有

window.name

屬性。這個屬性的最大特點是，無論是否同源，隻要在同一個視窗裡，前一個網頁設定了這個屬性，後一個網頁可以讀取它。并且可以支援非常長的 name 值（2MB）。

父視窗先打開一個子視窗，載入一個不同源的網頁，該網頁将資訊寫入

window.name

屬性。

window.name = data;
複制代碼           

接着，子視窗跳回一個與主視窗同域的網址。

location = 'http://parent.url.com/xxx.html';
複制代碼           

然後，主視窗就可以讀取子視窗的

window.name

了。

var data = document.getElementById('myFrame').contentWindow.name;
複制代碼           

這種方法的優點是，

window.name

容量很大，可以放置非常長的字元串；缺點是必須監聽子視窗

window.name

屬性的變化，影響網頁性能。

1.）a.html：(www.a.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(同域c頁)成功後，讀取同域window.name中資料
            callback(iframe.contentWindow.name);
            destoryFrame();

        } else if (state === 0) {
            // 第1次onload(跨域頁)成功後，切換到同域代理頁面
            iframe.contentWindow.location = 'http://www.a.com/c.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.b.com/b.html', function(data){
    alert(data);
});複制代碼           

2.）c.html：(www.a.com/c.html

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

3.）b.html：(www.b.com/b.html)

<script>
    window.name = 'This is b.html data!';
</script>複制代碼           

6.postMessage跨域

HTML5為了解決這個問題，引入了一個全新的API：跨文檔通信 API（Cross-document messaging）。

這個API為

window

對象新增了一個

window.postMessage

方法，允許跨視窗通信，不論這兩個視窗是否同源。

postMessage

方法的第一個參數是具體的資訊内容，第二個參數是接收消息的視窗的源（origin），即"協定 + 域名 + 端口"。也可以設為

*

，表示不限制域名，向所有視窗發送。

它可用于解決以下方面的問題：

a.） 頁面和其打開的新視窗的資料傳遞
b.） 多視窗之間消息傳遞
c.） 頁面與嵌套的iframe消息傳遞
d.） 上面三個場景的跨域資料傳遞複制代碼           

例子，a.js b.js 用node啟用兩個不同端口号的接口來模拟本地實作跨域

父視窗

localhost:4001/a.html

向子視窗

localhost:4002/b.html

發消息，調用

postMessage

方法就可以了。父視窗和子視窗都可以通過

message

事件，監聽對方的消息。

1）a.html

<iframe src="http://localhost:4002/b.html"     frameborder="0" id="frame" onload="load()"    ></iframe>
    <script>        function load(params) {            let frame = document.getElementById('frame');;            frame.contentWindow.postMessage('從a頁面向b頁面','http://localhost:4002');            window.onmessage = function (e) { //父視窗和子視窗都可以通過message事件，監聽對方的消息。                console.log(e.data, 'a.html');            }                    }複制代碼           

2)b.html

window.onmessage = function (e) { //父視窗和子視窗都可以通過message事件，監聽對方的消息。           console.log(e.data,'b.html');
//子視窗通過event.source屬性引用父視窗，然後發送消息。event.origin屬性可以過濾不是發給本視窗的消息。           e.source.postMessage('從b向a發消息',e.origin);       }  複制代碼           

3)a.js (運作a.js)

let express = require('express');let app = express();app.use(express.static(__dirname));app.listen(4001);複制代碼           

4）b.js (node b.js)

let express = require('express');let app = express();app.use(express.static(__dirname));app.listen(4002);複制代碼           

message

事件的事件對象

event

，提供以下三個屬性。

• event.source

  ：發送消息的視窗

• event.origin

  : 消息發向的網址

• event.data

  : 消息内容

• 7.nginx代理跨域

1、 nginx配置解決iconfont跨域

浏覽器跨域通路js、css、img等正常靜态資源被同源政策許可，但iconfont字型檔案(eot|otf|ttf|woff|svg)例外，此時可在nginx的靜态資源伺服器中加入以下配置。

location / {
  add_header Access-Control-Allow-Origin *;
}複制代碼           

2、 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;
    }
}複制代碼           

1.) 前端代碼示例：

var xhr = new XMLHttpRequest();

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

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

2.) 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.WebSocket

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

WebSocket是一種通信協定，使用

ws://

（非加密）和

wss://

（加密）作為協定字首。該協定不實行同源政策，隻要伺服器支援，就可以通過它進行跨源通信。

原生WebSocket API使用起來不太友善，可以使用Socket.io，它很好地封裝了webSocket接口，提供了更簡單、靈活的接口，也對不支援webSocket的浏覽器提供了向下相容。本此因為是模拟就沒有安裝了用了WebSocket

下面是一個例子，浏覽器發出的WebSocket請求的頭資訊（摘自維基百科）。

GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com
複制代碼           

上面代碼中，有一個字段是

Origin

，表示該請求的請求源（origin），即發自哪個域名。

正是因為有了

Origin

這個字段，是以WebSocket才沒有實行同源政策。因為伺服器可以根據這個字段，判斷是否許可本次通信。如果該域名在白名單内，伺服器就會做出如下回應。

HTTP/1.1 101 Switching Protocols
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Accept: HSmrc0sMlYUkAGmm5OPpG2HaGWk=
Sec-WebSocket-Protocol: chat複制代碼           

1.）前端代碼：

// 可以用socket.io來兼任    let socket = new WebSocket('ws://localhost:3000')    socket.onopen = function (params) {        socket.send('前端發送資訊');    }    socket.onmessage = function (e) {        console.log(e.data);    }複制代碼           

2.）Nodejs socket背景：需要安裝子產品ws

let express = require('express');let app = express();let Websocket = require('ws');let wss = new Websocket.Server({port:3000});wss.on('connection',function (ws) {    ws.on('message',function (data) {        console.log(data);        ws.send('從服務端發送websocket資訊');    })});複制代碼           

9. Nodejs中間件代理跨域

node中間件實作跨域代理，原理大緻與nginx相同，都是通過啟一個代理伺服器，實作資料的轉發，也可以通過設定cookieDomainRewrite參數修改響應頭中cookie中域名，實作目前域的cookie寫入，友善接口登入認證。

1、 非vue架構的跨域（2次跨域）

利用node + express + http-proxy-middleware搭建一個proxy伺服器。

1.）前端代碼示例：

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();複制代碼           

2.）中間件伺服器：

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...');複制代碼           

3.）Nodejs背景同（六：nginx）

2、 vue架構的跨域（1次跨域）

利用node + webpack + webpack-dev-server代理接口跨域。在開發環境下，由于vue渲染服務和接口代理服務都是webpack-dev-server同一個，是以頁面與代理接口之間不再跨域，無須設定headers跨域資訊了。

webpack.config.js部配置設定置：

module.exports = {
    entry: {},
    module: {},
    ...
    devServer: {
        historyApiFallback: true,
        proxy: [{
            context: '/login',
            target: 'http://www.domain2.com:8080',  // 代理跨域目标接口
            changeOrigin: true,
            secure: false,  // 當代理某些https服務報錯時用
            cookieDomainRewrite: 'www.domain1.com'  // 可以為false，表示不修改
        }],
        noInfo: true
    }
}複制代碼           

作者：草履蟲的思考

連結：https://juejin.im/post/5c9c38e2e51d452db7007f66

來源：掘金

著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。