http://localhost:6000/c.html

a.html中有一個(gè)隱藏的iframe,該iframe指向異域http://localhost:7000/b.html的b.html，且傳遞hash值給b.html`b.html獲取hash值，生成data值，然后動(dòng)態(tài)創(chuàng)建iframe，該iframe將data值傳給與a.html同域的c.html 因?yàn)?/b>c.html與a.html`同域，可以傳值固然也就解決了跨域問(wèn)題。

window.name

var person = {
  name: "Aaron",
  age: 18
}
window.name = JSON.stringify(person)

這是proxy頁(yè)面

在http://localhost:6000下有一個(gè)a.html，在http://localhost:7000下有一個(gè)b.html，在http://localhost:6000/a.html中創(chuàng)建了一個(gè)iframe標(biāo)簽并把地址指向了http://localhost:7000/b.html，在b.html中的window.name賦值保存了一段數(shù)據(jù)，但是現(xiàn)在還獲取不了，因?yàn)槭强缬虻模?，我們可以?b>src設(shè)置為當(dāng)前域的http://localhost:6000/proxy.html，雖然域名改變了但是window.name是沒(méi)有改變的。這樣就可以拿到我們想要的數(shù)據(jù)了。

postMessage(HTML5)

可能很多不知道postMessage整個(gè)API,在HTML5中新增了postMessage方法允許來(lái)自不同源的腳本采用異步方式進(jìn)行有限的通信，可以實(shí)現(xiàn)跨文本檔、多窗口、跨域消息傳遞，postMessage在很多瀏覽器中都已經(jīng)得到了良好的支持，所以可放心的使用。該方法可以通過(guò)綁定window的message事件來(lái)監(jiān)聽(tīng)發(fā)送跨文檔消息傳輸內(nèi)容。

postMessage()方法接受兩個(gè)參數(shù)

data:要傳遞的數(shù)據(jù)，html5規(guī)范中提到該參數(shù)可以是JavaScript的任意基本類(lèi)型或可復(fù)制的對(duì)象，然而并不是所有瀏覽器都做到了這點(diǎn)兒，部分瀏覽器只能處理字符串參數(shù)，所以我們?cè)趥鬟f參數(shù)的時(shí)候需要使用JSON.stringify()方法對(duì)對(duì)象參數(shù)序列化，在低版本IE中引用json2.js可以實(shí)現(xiàn)類(lèi)似效果。

origin：字符串參數(shù)，指明目標(biāo)窗口的源，協(xié)議+主機(jī)+端口號(hào)+URL，URL會(huì)被忽略，所以可以不寫(xiě)，這個(gè)參數(shù)是為了安全考慮，postMessage()方法只會(huì)將message傳遞給指定窗口，當(dāng)然如果愿意也可以建參數(shù)設(shè)置為"*"，這樣可以傳遞給任意窗口，如果要指定和當(dāng)前窗口同源的話設(shè)置為"/"。

http://localhost:6000/a.html

    
    發(fā)送消息

http://localhost:7000/b.html

    Hello World!

這樣我們就可以接收任何窗口傳遞來(lái)的消息了，為了安全起見(jiàn)，我們利用這時(shí)候的MessageEvent對(duì)象判斷了一下消息源，MessageEvent對(duì)象，這個(gè)對(duì)象中包含很多東西。

data：顧名思義，是傳遞來(lái)的message

source：發(fā)送消息的窗口對(duì)象

origin：發(fā)送消息窗口的源（協(xié)議+主機(jī)+端口號(hào)）

使用postMessage方法比以上方法用起來(lái)要輕便，不必有太多的繁瑣操作，可以說(shuō)postMessage是對(duì)于解決跨域來(lái)說(shuō)是一個(gè)比較好的解決方案，不會(huì)顯得代碼特別的臃腫，并且各個(gè)瀏覽器又有良好的支持。

跨域資源共享(CORS)

CORS：全稱(chēng)"跨域資源共享"（Cross-origin resource sharing）。CORS需要瀏覽器和服務(wù)器同時(shí)支持，才可以實(shí)現(xiàn)跨域請(qǐng)求，目前幾乎所有瀏覽器都支持CORS，IE則不能低于IE10。CORS的整個(gè)過(guò)程都由瀏覽器自動(dòng)完成，前端無(wú)需做任何設(shè)置，跟平時(shí)發(fā)送ajax請(qǐng)求并無(wú)差異。CORS的關(guān)鍵在于服務(wù)器，只要服務(wù)器實(shí)現(xiàn)CORS接口，就可以實(shí)現(xiàn)跨域通信。

跨域資源共享(CORS) 是一種機(jī)制，它使用額外的HTTP頭來(lái)告訴瀏覽器讓運(yùn)行在一個(gè)origin (domain) 上的Web應(yīng)用被準(zhǔn)許訪問(wèn)來(lái)自不同源服務(wù)器上的指定的資源。當(dāng)一個(gè)資源從與該資源本身所在的服務(wù)器不同的域、協(xié)議或端口請(qǐng)求一個(gè)資源時(shí)，資源會(huì)發(fā)起一個(gè)跨域HTTP請(qǐng)求。在上面說(shuō)過(guò)src是不受同源策略限制的，但是出于安全原因，瀏覽器限制從腳本內(nèi)發(fā)起的跨源HTTP請(qǐng)求。例如，XMLHttpRequest和FetchAPI遵循同源策略。這意味著使用這些API的Web應(yīng)用程序只能從加載應(yīng)用程序的同一個(gè)域請(qǐng)求HTTP資源，除非響應(yīng)報(bào)文包含了正確CORS響應(yīng)頭。

所有CORS相關(guān)的的頭都是Access-Control為前綴的。下面是每個(gè)頭的一些細(xì)節(jié)。

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

const app = express();
const 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簡(jiǎn)單請(qǐng)求，非常容易，對(duì)于前端來(lái)說(shuō)無(wú)需做任何配置，與發(fā)送普通ajax請(qǐng)求無(wú)異。唯一需要注意的是，需要攜帶cookie信息時(shí)，需要將withCredentials設(shè)置為true即可。CORS的配置，完全在后端設(shè)置，配置起來(lái)也比較容易，目前對(duì)于大部分瀏覽器兼容性也比較好，現(xiàn)在應(yīng)用最多的就是CORS解決跨域了。

在開(kāi)發(fā)過(guò)程中由于各個(gè)公司的差異選用的接口風(fēng)格也是不同的，很多公司會(huì)采用RESTful風(fēng)格去編寫(xiě)接口，難免就會(huì)有些騷操作，在跨域請(qǐng)求時(shí)自定義的請(qǐng)求頭是不允許這樣操作的，因?yàn)闉g覽器根據(jù)Response Headers判斷請(qǐng)求是否允許。

跨域時(shí)默認(rèn)允許的方法

GET

HEAD

POST

因?yàn)闉g覽器希望在網(wǎng)頁(yè)進(jìn)行跨域請(qǐng)求操作的時(shí)候是保證服務(wù)端的安全的，不允許任何隨便進(jìn)行跨域，不允許隨便的方法進(jìn)行跨域，以防數(shù)據(jù)被惡意篡改。所以提供這些限制之后，就可以進(jìn)行一些非常有利的判斷。針對(duì)如上問(wèn)題需要服務(wù)端進(jìn)行特殊處理才行

const http = request("http");
http.createServer(function(request,response){
    response.writeHead(200,{
        // 設(shè)置允許跨域的訪問(wèn)地址
        "Access-Control-Allow-Origin":"*",
        // 設(shè)置允許訪問(wèn)的自定義請(qǐng)求頭
        "Access-Control-Allow-Headers":"X-Test-Cors",
        // 設(shè)置允許跨域的methods
        "Access-Control-Allow-Methods":"POST,Put,Delete",
        // 允許以上三個(gè)方式進(jìn)行跨域的最長(zhǎng)時(shí)間，1000秒內(nèi)不需要發(fā)送預(yù)請(qǐng)求驗(yàn)證了
        "Access-Control-Max-Age":"1000"
    })
    response.end("123")
}).listen(3000)

這樣設(shè)置，這個(gè)請(qǐng)求就成功了，但是可以觀測(cè)到多了一個(gè)請(qǐng)求，這個(gè)多出來(lái)的請(qǐng)求就是預(yù)請(qǐng)求，告訴瀏覽器，這個(gè)自定義請(qǐng)求是允許的，然后再正式的發(fā)送這個(gè)請(qǐng)求，通過(guò)驗(yàn)證之后就請(qǐng)求成功了，瀏覽器為什么要做這些限制，是因?yàn)楸ＷC安全，不允許隨便一個(gè)人都可以進(jìn)行跨域。

WebSocket協(xié)議跨域

WebSocket是HTML5新推出的一個(gè)API，通過(guò)WebSocket可以實(shí)現(xiàn)客戶端與服務(wù)端的即時(shí)通信，如聊天室，服務(wù)數(shù)據(jù)同步渲染等等。WebSocket是點(diǎn)對(duì)點(diǎn)通信，服務(wù)端與客戶端可以通過(guò)某種標(biāo)識(shí)完成的。WebSocket是不受同源策略限制的所以可以利用這個(gè)特性直接與服務(wù)端進(jìn)行點(diǎn)對(duì)點(diǎn)通信。

以下示例沒(méi)有使用HTML5的WebSocket而是使用的socket.io完成類(lèi)似的功能操作。

若若的說(shuō)一句：其實(shí)我一直以為WebSocket與Ajax一樣是受同源策略限制的，經(jīng)過(guò)學(xué)習(xí)才發(fā)現(xiàn)不是的。真是學(xué)到老活到老(關(guān)谷口音)。O(∩_∩)O

服務(wù)端：

var io = require("socket.io")(1234);
io.sockets.on("connection", (client) => {
    client.on("message", function (msg) { //監(jiān)聽(tīng)到信息處理
        client.send("服務(wù)器收到了信息：" + msg);
    });
    client.on("disconnect", function () { //斷開(kāi)處理
        console.log("client has disconnected");
    });
});
console.log("listen 1234...");

客戶端：

$(function () {
    var iosocket = io.connect("http://localhost:1234/");
    var $ul = $("ul");
    var $input = $("input");
    iosocket.on("connect", function () {  //接通處理
        $ul.append($("
連上啦
"));
        iosocket.on("message", function (message) {  //收到信息處理
            $ul.append($("
").text(message));
        });
        iosocket.on("disconnect", function () { //斷開(kāi)處理
            $ul.append("
Disconnected
");
        });
    });

    $input.keypress(function (event) {
        if (event.which == 13) { //回車(chē)
            event.preventDefault();
            console.log("send : " + $input.val());
            iosocket.send($input.val());
            $input.val("");
        }
    });
});

Websocket既然能支持跨域方法，那就是說(shuō)，一個(gè)開(kāi)放給公網(wǎng)的Websocket服務(wù)任何人都能訪問(wèn)，這樣的話會(huì)使數(shù)據(jù)變得很不安全，所以可以通過(guò)對(duì)連接域名進(jìn)行認(rèn)證即可。

服務(wù)器反代

學(xué)習(xí)路程首先了解了一下什么是反代，在計(jì)算機(jī)網(wǎng)絡(luò)中，反向代理是代理服務(wù)器的一種。服務(wù)器根據(jù)客戶端的請(qǐng)求，從其關(guān)聯(lián)的一組或多組后端服務(wù)器（如Web服務(wù)器）上獲取資源，然后再將這些資源返回給客戶端，客戶端只會(huì)得知反向代理的IP地址，而不知道在代理服務(wù)器后面的服務(wù)器簇的存在。 -- 節(jié)選自百度百科

反向代理服務(wù)器：就nginx把http請(qǐng)求轉(zhuǎn)發(fā)到另一個(gè)或者一些服務(wù)器上。從而輕松實(shí)現(xiàn)跨域訪問(wèn)。比如服務(wù)器中分別部署了N個(gè)服務(wù)器，當(dāng)客戶端發(fā)起請(qǐng)求時(shí)不用直接請(qǐng)求服務(wù)器中N個(gè)節(jié)點(diǎn)上的服務(wù)，只需要訪問(wèn)我們的代理服務(wù)器就行了，代理服務(wù)器根據(jù)請(qǐng)求內(nèi)容分發(fā)到不同服務(wù)器節(jié)點(diǎn)。這僅是一種使用場(chǎng)景，當(dāng)然還可以做負(fù)載均衡等。

反向代理理解起來(lái)不是特別的難，平時(shí)生活中最常見(jiàn)的例子，當(dāng)我們撥打人工客服的時(shí)候，并不是直接撥打客服的某一個(gè)電話號(hào)碼，而是撥打總機(jī)號(hào)碼，當(dāng)我們撥打然后由總機(jī)進(jìn)行處理，然后再分發(fā)給不同的客服人員。r然而當(dāng)服務(wù)人員需要讓你掛斷電話等待回?fù)艿臅r(shí)候，也不是直接撥打到你的電話，同樣是也通過(guò)總機(jī)之后再轉(zhuǎn)發(fā)到你的電話。其實(shí)這個(gè)總機(jī)也就相當(dāng)于反代服務(wù)器。雖然這個(gè)例子不太貼切但是多多少少就是這個(gè)意思。

由于不太懂Nginx不知道該如何處理這個(gè)部分，只是對(duì)反向代理做了一個(gè)簡(jiǎn)單的了解，等以后學(xué)習(xí)了Nginx會(huì)補(bǔ)上相關(guān)代碼。

Nodejs代理跨域

使用Nodejs進(jìn)行跨域在我看來(lái)，就是使用Node服務(wù)做了一個(gè)中間代理轉(zhuǎn)發(fā)，其原理和反向代理差不多，當(dāng)訪問(wèn)某一個(gè)URL時(shí)需要通過(guò)服務(wù)器分發(fā)到另一個(gè)服務(wù)器URL地址中。這里就不過(guò)多的贅述了，直接看代碼吧。

示例代碼入下：

main.js

import http from "http";
import httpProxy from "http-proxy";
  
// 新建一個(gè)代理 Proxy Server 對(duì)象  
const proxy = httpProxy.createProxyServer({});  
  
// 捕獲異常  
proxy.on("error", function (err, req, res) {  
  res.writeHead(500, {  
    "Content-Type": "text/plain"  
  });  
  res.end("error");  
});  
    
// 在每次請(qǐng)求中，調(diào)用 proxy.web(req, res config) 方法進(jìn)行請(qǐng)求分發(fā)  
const server = http.createServer((req, res) => {  
  // 在這里可以自定義你的路由分發(fā)  
  let host = req.headers.host, ip = req.headers["x-forwarded-for"] || req.connection.remoteAddress;  
  switch(host){  
    case "www.a.com":   
        proxy.web(req, res, { target: "http://localhost:3000" });  
        break;  
    case "www.b.com":  
        proxy.web(req, res, { target: "http://localhost:4000" });  
        break;
    default:  
        res.writeHead(200, {  
            "Content-Type": "text/plain"  
        });  
        res.end("Hello Aaron！");  
  }  
});  
server.listen(8080);

如代碼所示，當(dāng)訪問(wèn)www.a.com的時(shí)候，請(qǐng)求就被轉(zhuǎn)發(fā)到了3000接口上，訪問(wèn)www.b.com時(shí)就被轉(zhuǎn)發(fā)到了4000這個(gè)接口上。這樣就簡(jiǎn)單的完成了一個(gè)反向代理的工作。

在使用vue開(kāi)發(fā)的時(shí)候難免也會(huì)遇到跨域問(wèn)題，或許你根本就沒(méi)有遇到，可能你們正好處于同一個(gè)域里面，還有一種可能就是，后端同學(xué)或者運(yùn)維同學(xué)已經(jīng)處理好有關(guān)跨域的相關(guān)操作。但是當(dāng)在開(kāi)發(fā)過(guò)程中遇到跨域的時(shí)候，什么前端應(yīng)該有對(duì)應(yīng)的解決辦法。vue-cli是基于Node服務(wù)的，所以我們可以利用這個(gè)服務(wù)來(lái)做代理工作，暫時(shí)解決開(kāi)發(fā)中的跨域問(wèn)題。

build/webpack.config.js

module.exports = {
    devServer: {
        historyApiFallback: true,
        proxy: [{
            context: "/login",  //  url以/login為開(kāi)頭時(shí)啟用代理
            target: "http://www.a.com:8080",  // 代理跨域目標(biāo)接口
            changeOrigin: true,
            secure: false,  // 當(dāng)代理某些https服務(wù)報(bào)錯(cuò)時(shí)用
            cookieDomainRewrite: "www.b.com"  // 可以為false，表示不修改
        }],
        noInfo: true
    }
}

在開(kāi)發(fā)過(guò)程中遇到的可以通過(guò)這種方式解決，但是到達(dá)生產(chǎn)環(huán)境時(shí)到底使用什么方法還是需要斟酌的，畢竟要使服務(wù)數(shù)據(jù)變得更加的安全才是最好的。

總結(jié)

以上講了很多有關(guān)跨域的解決方案，有利也有弊，對(duì)于我而言可能更加的傾向于后端粑粑或者運(yùn)維粑粑去解決跨域問(wèn)題，畢竟前端處理起來(lái)畢竟不是很安全，而且后端或者運(yùn)維處理起來(lái)也不是那么的麻煩。

很感謝大家利用這么長(zhǎng)時(shí)間來(lái)讀這篇文章，文章中若有錯(cuò)誤請(qǐng)?jiān)谙路搅粞裕瑫?huì)盡快做出修改。