摘要：技術(shù)的學(xué)習(xí)也是如此唯有實(shí)踐才能更清楚的明白原理和加深印象，因此本文會(huì)利用對(duì)前端的各種跨域方式進(jìn)行實(shí)踐，強(qiáng)烈建議一步一步跟著做，相信你肯定會(huì)對(duì)跨域有更深層次的理解。

常言道，"讀萬卷書，不如行萬里路"。技術(shù)的學(xué)習(xí)也是如此,唯有實(shí)踐才能更清楚的明白原理和加深印象，因此本文會(huì)利用node.js對(duì)前端的各種跨域方式進(jìn)行實(shí)踐，強(qiáng)烈建議一步一步跟著做，相信你肯定會(huì)對(duì)跨域有更深層次的理解。而由于篇幅限制，本文只會(huì)貼出關(guān)鍵性的代碼，本系列總共分為上下篇。具體的代碼請(qǐng)移步我的Github。如果對(duì)你有幫助的話，歡迎 star ヾ(′?ω?｀)?

接上文--->「跨域」利用node.js實(shí)踐前端各種跨域方式（上）

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是為數(shù)不多可以跨域操作的window屬性之一，它可用于解決以下方面的問題：

1.頁(yè)面和其打開的新窗口的數(shù)據(jù)傳遞
2.多窗口之間消息傳遞
3.頁(yè)面與嵌套的iframe消息傳遞
4.上面三個(gè)場(chǎng)景的跨域數(shù)據(jù)傳遞

用法：postMessage(data,origin)方法接受兩個(gè)參數(shù)
data： html5規(guī)范支持任意基本類型或可復(fù)制的對(duì)象，但部分瀏覽器只支持字符串，所以傳參時(shí)最好用JSON.stringify()序列化。
origin： 協(xié)議+主機(jī)+端口號(hào)，也可以設(shè)置為"*"，表示可以傳遞給任意窗口，如果要指定和當(dāng)前窗口同源的話設(shè)置為"/"。

來，我們來用node.js實(shí)踐一下~

目錄：postMessage/public/a.html

在iframe加載完成后，向b.html所在域發(fā)送數(shù)據(jù)。因?yàn)閜ostMessage是綁定在window對(duì)象上的，所以我們要獲取iframe.contentWindow再發(fā)送數(shù)據(jù)，同時(shí)監(jiān)聽message，觀察b.html有沒有回傳數(shù)據(jù)給我們?，F(xiàn)在分別跑兩個(gè)服務(wù)。訪問localhost:3333可以看到:

b.html接收到a.html發(fā)送過去的數(shù)據(jù)啦~

然后a.html也收到了b.html回傳的數(shù)據(jù)了。

跨域成功~ ( ?? ??)?

這個(gè)方案的原理圖如下：

說明：當(dāng)A域想與B域通信，可以通過nginx的反向代理，首先A域與同域的nginx服務(wù)器通信，然后nginx將請(qǐng)求轉(zhuǎn)發(fā)到另外一個(gè)服務(wù)器，因?yàn)榉?wù)器之間的通信不存在跨域，這樣我們就完成了跨域。具體實(shí)現(xiàn)如下：

首先，如果本地沒有安裝nginx的，需要安裝nginx。安裝完成后，我們對(duì)nginx進(jìn)行配置：

目錄：nginx-1.14.0/conf/nginx.conf

    server {
        listen       1111;
        server_name  localhost;

        location / {
            proxy_pass http://localhost:9999/; #反向代理到9999端口
            index  index.html index.htm;
            default_type "text/html";
            alias  "D:/Github/node-server/nginx/public/"; #client.html所在的本地的地址

            add_header Access_Control_Allow_Origin http://localhost:1111; 
            add_header Access_Control_Allow_Credentials true; #允許客戶端帶cookie訪問
        }

然后，我們配置9999端口的服務(wù)器

目錄：nginx/server.js

const http = require("http");
const server = http.createServer();
const qs = require("querystring");

server.on("request", function(req, res) {
    const query = require("url").parse(req.url, true).query;

    //向前臺(tái)寫cookie
    res.writeHead(200, {
        "Set-Cookie" : "name=jchermy;Path:/;Domain:localhost;Httponly" //HttpOnly 腳本無法讀取
    });
   
    res.write(JSON.stringify("Hi! "+query.user));
    res.end();
})

server.listen("9999");
console.log("Server is running at port 9999 .....");

這時(shí)候，我們打開瀏覽器，訪問 http://localhost:1111/client.html?user=jchermy,看到下面的頁(yè)面：

我們?cè)?111端口，將user=jchermy傳給9999端口，然后9999端口接收到了我們的發(fā)送的信息并回傳了"Hi! jchermy".說明這兩個(gè)url可以跨域相互通信！完成~

這個(gè)方案與nginx反向代理十分類似，只是將nginx代理服務(wù)器換成了node服務(wù)器。

目錄：node-middleware/proxyserver.js

const express = require("express");
const proxy = require("http-proxy-middleware");
const app = express();

app.use("/login", proxy({
    //代理跨域的目標(biāo)接口
    target: "http://localhost:5555",
    changeOrigin: true,
    //修改響應(yīng)頭信息，實(shí)現(xiàn)跨域，并允許帶cookie
    onProxyRes: function(proxyRes, req, res) {
        res.header("Access-Control-Allow-Origin", "http://localhost");
        res.header("Access-Control-Allow-Credentials", "true");
    },

    //修改響應(yīng)信息中的cookie域名
    cookieDomainRewrite: "http://localhost"
}));

app.use(express.static( "./public"));
app.listen(3333);
console.log("proxy server is listen at port 3333");

目錄：node-middleware/server.js

const http = require("http");
const server = new http.Server();
const qs = require("querystring");

server.on("request", function(request, response) {
    const query = require("url").parse(request.url, true).query;
    response.writeHead(200, {
        "Set-Cookie": "name=amiee;Path:/;Domain:localhost:3333;Httponly"
    });

    response.write(`Hi, ${query.name} ! I come from localhost:5555`);
    response.end();
})

server.listen("5555");
console.log("Server is running at port 5555 .....")

最后，訪問http://localhost:3333/login?name=hahah，可以看到：

WebSocket protocol是HTML5一種新的協(xié)議。它實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信，同時(shí)允許跨域通訊，是server push技術(shù)的一種很好的實(shí)現(xiàn)。
原生WebSocket API使用起來不太方便，我們使用Socket.io，它很好地封裝了webSocket接口，提供了更簡(jiǎn)單、靈活的接口，也對(duì)不支持webSocket的瀏覽器提供了向下兼容。

首先，我們創(chuàng)建一個(gè)客戶端的html頁(yè)面。

目錄：webSocket/public/index.html

    
    
    
    


    
用戶輸入: 
    
    

將這個(gè)頁(yè)面部署在3333端口上。

目錄：webSocket/client.js

const express = require("express");
const app = express();

app.use(express.static("./public"));
app.listen(3333);
console.log("client is running at port 3333....");

最后，創(chuàng)建一個(gè)服務(wù)器，接收客戶端的請(qǐng)求，并給予返回值

目錄: webSocket/server.js

const http = require("http");
const socket = require("socket.io");
 
//啟動(dòng)http服務(wù)
const server = http.createServer(function(req, res) {
    res.writeHead(200, {
        "Content-type": "text/html"
    });
    res.end();
})

server.listen(5555);
console.log("server is running at port 5555");

const io = socket(server);
//監(jiān)聽socket連接
io.on("connection", function (client) {
    //接收消息
    client.on("message", function (msg) {
        io.emit("message",  `hello, ${msg}`);
        console.log("data from client --->" + msg);
      });

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

將客戶端和服務(wù)器端都跑起來，輸入一些字符，當(dāng)鼠標(biāo)失去焦點(diǎn)后可以在服務(wù)器端5555端口的控制臺(tái)看到：

這說明服務(wù)器已經(jīng)收到了客戶端發(fā)送過去的字符。

此時(shí)在打開客戶端頁(yè)面的控制臺(tái)，可以看到客戶端也收到了服務(wù)器返回的字符：

這個(gè)系列終于寫完啦，還是那句話，有錯(cuò)誤和不合理的地方歡迎大家指正！如果文章對(duì)你有幫助的話，歡迎點(diǎn)贊和收藏??！Github給個(gè)star就最好啦！=（//▽//）感謝大家~