摘要：跨域的產(chǎn)生不用多講，作為一名前端開發(fā)人員，相信大家都知道跨域是因?yàn)闉g覽器的同源策略所導(dǎo)致的。瀏覽器引入同源策略主要是為了防止，攻擊。其指明了實(shí)際請(qǐng)求所允許使用的方法。

跨域，相信大家無論是在工作中還是在面試中經(jīng)常遇到這個(gè)問題，常常在網(wǎng)上看到別人所整理的一些方法，看似知道是怎么回事，但如果沒有動(dòng)手實(shí)踐過，總覺得自己沒有真正的掌握，在這里，通過自己認(rèn)真思考整理一些常用的方法。

不用多講，作為一名前端開發(fā)人員，相信大家都知道跨域是因?yàn)?strong>瀏覽器的同源策略所導(dǎo)致的。所謂同源是指"協(xié)議+域名+端口"三者相同，即便兩個(gè)不同的域名指向同一個(gè)ip地址，也非同源。瀏覽器引入同源策略主要是為了防止XSS，CSRF攻擊。

CSRF（Cross-site request forgery），跨站請(qǐng)求偽造，也被稱為：one click attack/session riding，縮寫為：CSRF/XSRF。

在同源策略影響下，域名A向域名B發(fā)送Ajax請(qǐng)求，或操作Cookie、LocalStorage、indexDB等數(shù)據(jù),或操作dom，js就會(huì)受到限制，但請(qǐng)求css，js等靜態(tài)資源不受限制

首先說一下jsonp的原理，例如我們平時(shí)寫html的時(shí)候常常會(huì)使用
這種方式去取放在另外服務(wù)器上的靜態(tài)資源，這個(gè)是不受同源策略所限制的，所以我們利用這一點(diǎn)可以解決跨域的問題。

主要代碼如下：

在www.a.com域名寫下如下代碼，去請(qǐng)求www.b.com域名的數(shù)據(jù)

這里，我們利用動(dòng)態(tài)腳本的src屬性，變相地發(fā)送了一個(gè)http://www.b.com/getdata?call...。這時(shí)候，b.com頁面接受到這個(gè)請(qǐng)求時(shí)，如果沒有JSONP,會(huì)正常返回json的數(shù)據(jù)結(jié)果，像這樣：{ msg: "helloworld" },而利用JSONP,服務(wù)端會(huì)接受這個(gè)callback參數(shù)，然后用這個(gè)參數(shù)值包裝要返回的數(shù)據(jù)：demo({msg: "helloworld"});

這時(shí)候，如果a.com的頁面上正好有一個(gè)demo 的函數(shù)：

function demo(res){

  console.log(res);

}

當(dāng)遠(yuǎn)程數(shù)據(jù)一返回的時(shí)候，隨著動(dòng)態(tài)腳本的執(zhí)行，這個(gè)demo函數(shù)就會(huì)被執(zhí)行。

$.ajax({
    url:"http://www.b.com/getdata",
    type:"get",
    dataType: "jsonp",  // 請(qǐng)求方式為jsonp
    jsonpCallback: "demo", // 自定義回調(diào)函數(shù)名
    data: {}
});

以nodejs為例

var http = require(http);
//引入url模塊解析url字符串
var url = require("url);
//引入querystring模塊處理query字符串
var querystring = require("querystring");

var server = http.createServer();

server.on("request",function(req,res){
    var urlPath = url.parse(req.url).pathname;
    var param = querystring .parse(req.url.split("?")[1]);
    
    if(urlPath === "/getData" && param.callback) {
    
        res.writeHead(200,{"Content-Type","application/json;charset=utf-8"});
        
        var data = { msg: "helloworld" };
        data = JSON.stringify(data );
        
        var callback = param .callback+"("+data+");";
        res.write(callback);
        
        res.end();
    } else {
        res.writeHead(200, {"Content-Type":"text/html;charset=utf-8"});
        
        res.write("Hell World
");
        res.end();    
    
    }


})

jsonp缺點(diǎn)：只能使用get請(qǐng)求，不推薦使用

跨域資源共享(CORS) 是一種機(jī)制，它使用額外的 HTTP 頭來告訴瀏覽器  讓運(yùn)行在一個(gè) origin (domain) 上的Web應(yīng)用被準(zhǔn)許訪問來自不同源服務(wù)器上的指定的資源。當(dāng)一個(gè)資源從與該資源本身所在的服務(wù)器不同的域或端口請(qǐng)求一個(gè)資源時(shí)，資源會(huì)發(fā)起一個(gè)跨域 HTTP 請(qǐng)求。
Cross-Origin Resource Sharing跨域資源共享,應(yīng)該算是現(xiàn)在比較推薦的跨域處理方案.不僅適用于各種Method,而且更加方便和簡單
目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。

瀏覽器將CORS請(qǐng)求分成兩類：簡單請(qǐng)求（simple request）和非簡單請(qǐng)求（not-so-simple request）。

簡單請(qǐng)求同時(shí)滿足以下條件,只要不滿足以下條件的則為非簡單請(qǐng)求

非簡單請(qǐng)求會(huì)發(fā)出一次預(yù)檢測請(qǐng)求，返回碼是204，預(yù)檢測通過才會(huì)真正發(fā)出請(qǐng)求，這才返回200。這里通過前端發(fā)請(qǐng)求的時(shí)候增加一個(gè)額外的headers來觸發(fā)非簡單請(qǐng)求。

默認(rèn)情況下的跨域請(qǐng)求都是不會(huì)把cookie發(fā)送給服務(wù)器的，在需要發(fā)送的情況下，如果是xhr，那么需要設(shè)置xhr.withCredentials=true,

如果是采用fetch獲取的話，那么需要在request里面設(shè)置 credentials:"include",

但是如果服務(wù)器在預(yù)請(qǐng)求的時(shí)候沒返回Access-Control-Allow-Crenditials:true的話，那么在實(shí)際請(qǐng)求的時(shí)候，cookie是不會(huì)被發(fā)送給服務(wù)器端的，要特別注意對(duì)于簡單的get請(qǐng)求，不會(huì)有預(yù)請(qǐng)求的過程，

那么在實(shí)際請(qǐng)求的時(shí)候，如果服務(wù)器沒有返回Access-Control-Allow-Crenditials:true的話那么響應(yīng)結(jié)果瀏覽器也不會(huì)交給請(qǐng)求者

對(duì)于附帶身份憑證的請(qǐng)求，服務(wù)器不得設(shè)置 Access-Control-Allow-Origin 的值為“*”。
這是因?yàn)檎?qǐng)求的首部中攜帶了 Cookie 信息，如果 Access-Control-Allow-Origin
的值為“*”，請(qǐng)求將會(huì)失敗。而將 Access-Control-Allow-Origin 的值設(shè)置為
http://www.a.com，則請(qǐng)求將成功執(zhí)行。

Access-Control-Allow-Origin: | *

Access-Control-Expose-Headers 頭讓服務(wù)器把允許瀏覽器訪問的頭放入白名單

Access-Control-Max-Age 頭指定了preflight請(qǐng)求的結(jié)果能夠被緩存多久

Access-Control-Allow-Credentials
頭指定了當(dāng)瀏覽器的credentials設(shè)置為true時(shí)是否允許瀏覽器讀取response的內(nèi)容。

Access-Control-Allow-Methods 首部字段用于預(yù)檢請(qǐng)求的響應(yīng)。其指明了實(shí)際請(qǐng)求所允許使用的 HTTP 方法。

Access-Control-Allow-Headers 首部字段用于預(yù)檢請(qǐng)求的響應(yīng)。其指明了實(shí)際請(qǐng)求中允許攜帶的首部字段。

var express=require("express");
var url=require("url");
var app=express();
var allowCrossDomain = function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "http://localhost:63342");
    res.header("Access-Control-Allow-Methods", "GET,PUT,POST,DELETE");
    res.header("Access-Control-Allow-Headers", "Content-Type");
    res.header("Access-Control-Allow-Credentials","true");
    next();
};
app.use(allowCrossDomain);
app.get("/getData",function (req,res,next) {
    var queryValue=url.parse(req.url).query;
    if(queryValue==="fortunewheel@sina.com"){
        res.send(true);
    }else {
        res.send(false);
    }

});
app.listen(3001);

實(shí)際開發(fā)過程中，為了安全，會(huì)和token一起使用

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

iframe嵌套頁面跨域通信

頁面和其打開的新窗口的通信

多窗口之間消息傳遞

用法：
postMessage(data,origin)方法接受兩個(gè)參數(shù)，

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

代碼示例：
http://www.a.com/a.html

http://www.b.com/b.html

這種方式只適合主域名相同，但子域名不同的iframe跨域。
實(shí)現(xiàn)原理：兩個(gè)頁面都通過js強(qiáng)制設(shè)置document.domain為基礎(chǔ)主域，就實(shí)現(xiàn)了同域。

使用方式：
http://www.a.com/a.html

"http://www.child.a.com/b.html

window.name 傳輸技術(shù)的基本原理： 
當(dāng)在瀏覽器中打開一個(gè)頁面，或者在頁面中添加一個(gè)iframe時(shí)即會(huì)創(chuàng)建一個(gè)對(duì)應(yīng)的window對(duì)象，當(dāng)頁面加載另一個(gè)新的頁面時(shí)，window.name的屬性是不會(huì)變的。這樣就可以利用在頁面動(dòng)態(tài)添加一個(gè)iframe然后加載數(shù)據(jù)頁面，在數(shù)據(jù)頁面將需要的數(shù)據(jù)賦值給window.name。然而此時(shí)承載的iframe的parent頁面還是不能直接訪問不在同一域下的iframe的那么屬性，這時(shí)，只需要將iframe再加載一個(gè)與承載頁面同域的空白頁面，即可對(duì)window.name進(jìn)行數(shù)據(jù)讀取。
通過iframe的src屬性由外域轉(zhuǎn)向本地域，跨域數(shù)據(jù)即由iframe的window.name從外域傳遞到本地域。這個(gè)就巧妙地繞過了瀏覽器的跨域訪問限制，但同時(shí)它又是安全操作。

具體實(shí)現(xiàn)：
http://www.a.com/a.html 主頁面
http://www.b.com/b.html 數(shù)據(jù)頁面
http://www.a.com/proxy.html 代理頁面

http://www.a.com/a.html代碼：

http://www.b.com/b.html代碼：

    window.name = "123"

http://www.a.com/proxy.html空白

server{
    # 監(jiān)聽8080端口
    listen 8080;
    # 域名是localhost
    server_name localhost;
    #凡是localhost:8080/api這個(gè)樣子的，都轉(zhuǎn)發(fā)到真正的服務(wù)端地址http://www.b.com:8080 
    location ^~ /api {
        proxy_pass http://www.b.com:8080;
    }    
}

配置之后就不需要前端做什么修改了，一般我們?cè)谇昂蠖朔蛛x項(xiàng)目中開發(fā)階段會(huì)采用這種方式，但不是所有場景都能這樣做，例如后端接口是一個(gè)公共的API，比如一些公共服務(wù)獲取天氣什么的。

websoket協(xié)議天然支持跨域，你只需要學(xué)會(huì)如何使用它即可，關(guān)于websocket協(xié)議請(qǐng)看我的另外一篇文章WebSocket網(wǎng)絡(luò)通信協(xié)議

參考文章：
https://developer.mozilla.org...
https://segmentfault.com/a/11...