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

草履蟲的思考發表於2019-03-28
前端面試JS跨域

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

什麼是跨域？

前端面試總結之：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可以省略）。

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

常見跨域場景 

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來實現如下圖，

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

前端面試總結之：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 如下圖也是可以的前端面試總結之：js跨域問題


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

複製程式碼

如下圖，可正常呼叫輸出：前端面試總結之：js跨域問題

模擬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
    }
}複製程式碼

本文內容參考網上內容，如有雷同和錯誤，請與我聯絡。


相關文章