摘要：同源策略是處于對用戶安全的考慮，如果非同源就會受到以下限制不能讀取無法獲得請求不能發(fā)送但是事實(shí)是經(jīng)常需要借助非同源來提供數(shù)據(jù)，所以就需要進(jìn)行跨域請求。

注：本文完整示例地址
先來說一個(gè)概念就是同源，同源指的是協(xié)議，端口，域名全部相同。

同源策略（Same origin policy）是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，則瀏覽器的正常功能可能都會受到影響。可以說Web是構(gòu)建在同源策略基礎(chǔ)之上的，瀏覽器只是針對同源策略的一種實(shí)現(xiàn)。

同源策略是處于對用戶安全的考慮，如果非同源就會受到以下限制：

cookie不能讀取

dom無法獲得

ajax請求不能發(fā)送

但是事實(shí)是經(jīng)常需要借助非同源來提供數(shù)據(jù)，所以就需要進(jìn)行跨域請求。

JSONP是指JSON Padding，JSONP是一種非官方跨域數(shù)據(jù)交換協(xié)議，由于script的src屬性可以跨域請求，所以JSONP利用的就是瀏覽器的這個(gè)“漏洞”，需要通信時(shí)，動(dòng)態(tài)的插入一個(gè)script標(biāo)簽。請求的地址一般帶有一個(gè)callback參數(shù)，假設(shè)需要請求的地址為http://localhost:666?callback=show，服務(wù)端返回的代碼一般是show(數(shù)據(jù))的JSON數(shù)據(jù)，而show函數(shù)恰恰是前臺需要用這個(gè)數(shù)據(jù)的函數(shù)。JSONP非常的簡單易用，自動(dòng)補(bǔ)全API利用的就是JSONP，下面來看一個(gè)例子：

// 前端請求代碼
function jsonp (callback) {
    var script = document.createElement("script"),
        url = `http://localhost:666?callback=${callback}`;
    script.setAttribute("src", url);
    document.querySelector("head").appendChild(script);
}
function show (data) {
    console.log(`學(xué)生姓名為：${data.name}，年齡為：${data.age}，性別為${data.sex}`);
}
jsonp("show");
// 后端響應(yīng)代碼
const student = {
    name: "zp1996",
    age: 20,
    sex: "male"
};
var callback = url.parse(req.url, true).query.callback;
res.writeHead(200, {
    "Content-Type": "application/json;charset=utf-8"
});
res.end(`${callback}(${JSON.stringify(student)})`);

JSONP雖說簡單易用，但是有一個(gè)很大問題，那就是JSONP只能進(jìn)行get請求

CORS(跨域資源共享)是由W3C制定的跨站資源分享標(biāo)準(zhǔn)，可以讓AJAX實(shí)現(xiàn)跨域訪問。想要了解跨域的話，首先需要了解下簡單請求：

請求方式為GET或者POST

假若請求是POST的話，Content-Type必須為下列之一：

application/x-www-form-urlencoded

multipart/form-data

text/plain

不含有自定義頭（類似于segmentfault自定義的頭X-Hit）

對于簡單請求的跨域只需要進(jìn)行一次http請求：

function ajaxPost (url, obj, header) {
    return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest(),
        str = "",
        keys = Object.keys(obj);
      for (var i = 0, len = keys.length; i < len; i++) {
        str += `${keys[i]}=${obj[keys[i]]}&`;
      }
      str = str.substring(0, str.length - 1);
      xhr.open("post", url);
      xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      if (header instanceof Object) {
          for (var k in header) 
              xhr.setRequestHeader(k, header[k]);
      }
      xhr.send(str);
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
            resolve(xhr.responseText);
          } else {
            reject();
          }
        }
      }
    });
}
ajaxPost("http://localhost:666?page=cors", {
    name: "zp1996",
    age: 20,
    sex: "male"
})
.then((text) => { console.log(text); }, 
            () => { console.log("請求失敗"); });

// 后端處理
var postData = "";
// 注釋下，下面示例后臺代碼補(bǔ)充在此處
req.on("data", (data) => {
    postData += data;
});
req.on("end", () => {
    postData = querystring.parse(postData);
    res.writeHead(200, {
        "Access-Control-Allow-Origin": "*",
        "Content-Type": "application/json;charset=utf-8"
    });
    if (postData.name === student.name &&
        Number(postData.age) === student.age &&
        postData.sex === student.sex
         ) {
        res.end(`yeah！${postData.name} is a good boy~`);
    } else {
        res.end("No！a bad boy~");
    }
});

打開控制臺觀察可以發(fā)現(xiàn)，Network只是發(fā)出了一次請求，但是對于非簡單請求來說，需要兩次http請求，在真正的請求之前需要進(jìn)行一次預(yù)請求，下圖是進(jìn)行一次預(yù)請求的請求/響應(yīng)：

觀察響應(yīng)頭，可以發(fā)現(xiàn)需要多出了兩個(gè)響應(yīng)頭：

Access-Control-Allow-Headers，用來指明在實(shí)際的請求中，可以使用那些自定義的http請求頭。

Access-Control-Max-Age，用來指定此次預(yù)請求的結(jié)果的有效期，在有效期內(nèi)則不會發(fā)出預(yù)請求，有點(diǎn)像緩存的感覺。

當(dāng)然還有諸如好多這樣的響應(yīng)頭，請大家自行搜索了解，這里就不再過多介紹，下面來看下對于非簡單請求跨域的代碼處理：

// 前端請求代碼
ajaxPost("http://localhost:666?page=cors", {
    name: "zp1996",
    age: 20,
    sex: "male"
}, { "X-author": "zp1996" })
.then((text) => { console.log(text); }, 
            () => { console.log("請求失敗"); });

// 后端處理，補(bǔ)充在簡單請求代碼注釋處
if (req.method === "OPTIONS") {
    res.writeHead(200, {
        "Access-Control-Max-Age": 3000,
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "X-author",
        "Content-Type": "application/json;charset=utf-8"
    });    
    res.end();
    return void 0;        
} 

既然可以利用script的“漏洞”來進(jìn)行JSONP跨域，那么是不是也可以利用css樣式寫可以進(jìn)行跨域請求來進(jìn)行跨域呢？答案肯定是yes，利用css還有一個(gè)好處那就是，當(dāng)被注入攻擊腳本時(shí)，css盡管被注入，也不會引起什么大的安全問題，頂多也就是把頁面的樣式給改變，而js被注入的話，cookie就有可能被盜取等一系列安全問題出現(xiàn)。大牛已經(jīng)將其做的非常完善，大家可以去star王集鵠（zswang）CSST，這里我就把我所理解給大家簡單的分享下：

// 前端代碼
const id = "csst",
    ele = document.querySelector(`#${id}`),
    head = document.querySelector("head");
function getStyle (ele, prop) {
    return getComputedStyle(ele, "").getPropertyValue(prop);
}
function loadCss (url) {
    return new Promise((resolve) => {
        const link = document.createElement("link");
         link.setAttribute("rel", "stylesheet");
        link.setAttribute("type", "text/css");
        link.setAttribute("href", url);
        ele.addEventListener("webkitAnimationStart", function () {
            resolve(getStyle(ele, "content"));
        });
        head.appendChild(link);
    });
}
loadCss(`http://localhost:666?page=data.css&id=${id}`).then((data) => {
    console.log(data);
});

// 后端代碼
function cssData (id) {
    return `
        @keyframes a{
            from{

            }
            to{
                color: red;
            }
        }
        #${id} {
            content: "這種是很好，但是只能傳輸文本啊";
            animation: a 2s;
        }
    `;
}
res.writeHead(200, {
    "Content-Type": "text/css"
});
res.end(cssData(query.id));

通過代碼可以看出這種實(shí)現(xiàn)方式是靠元素的content來拿接收到的數(shù)據(jù)，所以傳輸?shù)闹荒苁俏谋?/strong>。至于為什么要返回動(dòng)畫？是因?yàn)椴焕脛?dòng)畫，無法來對css腳本加載進(jìn)行監(jiān)測，也就無法進(jìn)行回調(diào)（由于谷歌/火狐不支持link的onload和onreadychange，所以利用animationstart事件）。

window.postMessage 是一個(gè)安全的跨源通信的方法。一般情況下，當(dāng)且僅當(dāng)執(zhí)行腳本的頁面使用相同的協(xié)議（通常都是 http）、相同的端口（http默認(rèn)使用80端口）和相同的 host（兩個(gè)頁面的 document.domain 的值相同）時(shí)，才允許不同頁面上的腳本互相訪問。 window.postMessage 提供了一個(gè)可控的機(jī)制來安全地繞過這一限制，當(dāng)其在正確使用的情況下。

// 發(fā)送端代碼
var domain = "http://localhost",
    index = 1,
    target = window.open(`${domain}/postmessage-target.html`);
function send () {
    setInterval(() => {
        target.postMessage(`第${index++}次數(shù)據(jù)發(fā)送`, domain);
    }, 1000);
}
send();
// 接受端代碼
沒有數(shù)據(jù)過來啊

// 發(fā)送端添加代碼
window.addEventListener("message", (e) => {
    if (e.data === "ok")
        send();
    else 
        console.log(e.data);
});

// 接受端的head里面加上script標(biāo)簽

window.name 的美妙之處：name 值在不同的頁面（甚至不同域名）加載后依舊存在，并且可以支持非常長的 name 值（2MB）