跨域是日常開(kāi)發(fā)中經(jīng)常開(kāi)發(fā)中經(jīng)常會(huì)接觸到的一個(gè)重難點(diǎn)知識(shí)骨宠，何不總結(jié)實(shí)踐一番纵装，從此心中對(duì)之了無(wú)牽掛。
同源策略
之所以會(huì)出現(xiàn)跨域解決方案扇苞，是因?yàn)橥床呗缘南拗破鄣睢Ｍ床呗砸?guī)定了如果兩個(gè) url 的協(xié)議、域名鳖敷、端口中有任何一個(gè)不等脖苏，就認(rèn)定它們跨源了。比如下列表格列出和 http://127.0.0.1:3000 比較的同源檢測(cè)的結(jié)果定踱，
| url | 結(jié)果 | 原因 |
|---|---|---|
| http://127.0.0.1:3000/index | 同源 | |
| https://127.0.0.1:3000 | 跨源 | 協(xié)議不同 |
| https://localhost:3000 | 跨源 | 域名不同 |
| http://127.0.0.1:3001 | 跨源 | 端口不同 |
那跨源有什么后果呢棍潘？歸納有三：不能獲取 Cookie、LocalStorage崖媚、IndexedDB亦歉；不能獲取 dom 節(jié)點(diǎn)；不能進(jìn)行一般的 Ajax 通信畅哑；跨域解決方案的出現(xiàn)就是為了解決以上痛處肴楷。
JSONP 跨域
提到 JSONP 跨域，不得不先提到 script 標(biāo)簽敢课，和 img、iframe 標(biāo)簽類(lèi)似绷杜，這些標(biāo)簽是不受同源策略限制的直秆，JSONP 的核心就是通過(guò)動(dòng)態(tài)加載 script 標(biāo)簽來(lái)完成對(duì)目標(biāo) url 的請(qǐng)求。
先來(lái)看一段 JSONP 調(diào)用的 Headers 部分鞭盟，字段如下：
Request URL:http://127.0.0.1:3000/?callback=handleResponse
Request Method:GET
Status Code:200 OK
Remote Address:127.0.0.1:3000
可以很鮮明地發(fā)現(xiàn)在 Request URL 中有一句 ?callback=handleResponse圾结，這個(gè) callback 后面跟著的 handleResponse 即回調(diào)函數(shù)名（可以任意取）齿诉，服務(wù)端會(huì)接收到這個(gè)參數(shù)然后拼接成形如 handleResponse(JSON) 的形式返還給前端(這也是 JSONP == JSON with padding 的原因吧)筝野，如下圖，這時(shí)候?yàn)g覽器就會(huì)自動(dòng)調(diào)用我們事先定義好的 handleResponse 函數(shù)粤剧。
前端代碼示例：(源為 http://127.0.0.1:3001)
function handleResponse(res) {
console.log(res) // {text: "jsonp"}
}
const script = document.createElement('script')
script.src = 'http://127.0.0.1:3000?callback=handleResponse'
document.head.appendChild(script)
服務(wù)端代碼示例：(源為 http://127.0.0.1:3000)
const server = http.createServer((req, res) => {
if (~req.url.indexOf('?callback')) { // 簡(jiǎn)單處理 JSONP 跨域的時(shí)候
const obj = {
"text": 'jsonp',
}
const callback = req.url.split('callback=')[1]
const json = JSON.stringify(obj)
const build = callback + `(${json})`
res.end(build) // 這里返還給前端的是拼接好的 JSON 對(duì)象
}
});
可以看出 JSONP 具有直接訪問(wèn)響應(yīng)文本的優(yōu)點(diǎn)歇竟，但是要想確認(rèn) JSONP 是否請(qǐng)求失敗并不容易，因?yàn)?script 標(biāo)簽的 onerror 事件還未得到瀏覽器廣泛的支持愕够，此外它僅能支持 GET 方式調(diào)用赂蕴。
CORS 跨域
CORS(Cross-Origin Resource Sharing) 可以理解為加強(qiáng)版的 Ajax逮京，也是目前主流的跨域解決方案翰舌。它的核心思想即前端與后端進(jìn)行 Ajax 通信時(shí)盅安，通過(guò)自定義 HTTP 頭部設(shè)置從而決定請(qǐng)求或響應(yīng)是否生效唤锉。
比如前端代碼(url 為 http://127.0.0.1:3001)寫(xiě)了段 Ajax，代碼如下：
const xhr = new XMLHttpRequest()
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
console.log('responseTesx:' + xhr.responseText)
}
}
}
xhr.open('get', 'http://127.0.0.1:3000', true)
xhr.send()
因?yàn)槎丝诓灰恢碌年P(guān)系這時(shí)候?qū)е虏煌戳吮鸩t，這時(shí)候會(huì)在 Request Headers 中發(fā)現(xiàn)多了這么一行字段窿祥，
Origin: http://127.0.0.1:3001
而且控制臺(tái)中會(huì)報(bào)出如下錯(cuò)誤:
Failed to load http://127.0.0.1:3000/: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:3001' is therefore not allowed access.
這時(shí)候就需要在服務(wù)端設(shè)置字段 Access-Control-Allow-Origin，它的作用就是設(shè)置允許來(lái)自什么源的請(qǐng)求蝙寨，如果值設(shè)置為 *晒衩，表明允許來(lái)自任意源的請(qǐng)求。服務(wù)端代碼示例如下：
http.createServer((req, res) => {
res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:3001') // 設(shè)置允許來(lái)自 http://127.0.0.1:3001 源的請(qǐng)求
})
CORS 分為簡(jiǎn)單請(qǐng)求以及非簡(jiǎn)單請(qǐng)求籽慢〗牛可以這么區(qū)分，如果請(qǐng)求方法為 POST箱亿、GET跛锌、HEAD 時(shí)為簡(jiǎn)單請(qǐng)求，其它方法如 PUT届惋、DELETE 等為非簡(jiǎn)單請(qǐng)求髓帽，如果是非簡(jiǎn)單請(qǐng)求的話，可以在 chrome 的 Network 中看到多了一次 Request Method 為 OPTIONS 的請(qǐng)求脑豹。如下圖:
可以把這個(gè)請(qǐng)求稱(chēng)為預(yù)請(qǐng)求郑藏，用白話文翻譯下，瀏覽器詢(xún)問(wèn)服務(wù)器瘩欺，'服務(wù)器大哥必盖，我這次要進(jìn)行 PUT 請(qǐng)求，你給我發(fā)張通行證唄'俱饿，服務(wù)器大哥見(jiàn)瀏覽器小弟這么殷勤歌粥，于是給了它發(fā)了張通行證，叫作 Access-Control-Allow-Methods:PUT拍埠，接著瀏覽器就能愉快地進(jìn)行 PUT 請(qǐng)求了失驶。服務(wù)端代碼示例如下：
http.createServer((req, res) => {
res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:3001')
res.setHeader('Access-Control-Allow-Methods', 'http://127.0.0.1:3001')
})
聊完簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求的區(qū)別后，再來(lái)看看如何利用 CORS 實(shí)現(xiàn) Cookie 的跨域傳送枣购，首先在服務(wù)器隨意設(shè)置個(gè) Cookie 值下發(fā)到瀏覽器嬉探，如果非跨域的情況下，瀏覽器再次請(qǐng)求服務(wù)器時(shí)就會(huì)帶上服務(wù)器給的 Cookie棉圈，但是跨域的時(shí)候怎么辦呢涩堤？不賣(mài)關(guān)子了，需在服務(wù)端設(shè)置 Access-Control-Allow-Credentials 字段以及在客戶(hù)端設(shè)置 withCredentials 字段分瘾，兩者缺一不可定躏，代碼如下：
前端代碼示例：(源為 http://127.0.0.1:3001)
const xhr = new XMLHttpRequest()
...
xhr.withCredentials = true // 傳 cookie 的時(shí)候前端要做的
xhr.open('get', 'http://127.0.0.1:3000', true)
xhr.send()
服務(wù)端代碼示例: (源為 http://127.0.0.1:3000)
const server = http.createServer((req, res) => {
res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:3001') // 必填：接受域的請(qǐng)求
res.setHeader('Set-Cookie', ['type=muyy']) // 下發(fā) cookie
res.setHeader('Access-Control-Allow-Credentials', true) // ② 選填：是否允許瀏覽器傳 cookie 到服務(wù)端，只能設(shè)置為 true
res.end('date from cors')
})
至此介紹了幾個(gè)比較關(guān)鍵 HTTP 頭在 CORS 中的實(shí)踐運(yùn)用，更為詳細(xì)的資料可以參閱 Cross-Origin Resource Sharing痊远，最后概括下 CORS 的優(yōu)缺點(diǎn)垮抗，優(yōu)點(diǎn)是支持所有類(lèi)型的 HTTP 方法，缺點(diǎn)是有些老的瀏覽器不支持 CORS碧聪。
hash + iframe
在文章最開(kāi)始提到過(guò) iframe 標(biāo)簽也是不受同源策略限制的標(biāo)簽之一冒版，hash + iframe 的跨域核心思想就是，在 A 源中通過(guò)動(dòng)態(tài)改變 iframe 標(biāo)簽的 src 的哈希值逞姿，在 B 源中通過(guò) window.onhashchange 來(lái)捕獲到相應(yīng)的哈希值辞嗡。思路不難直接上代碼：
A 頁(yè)面代碼示例(源為 http://127.0.0.1:3000)
<body>
<iframe src="http://127.0.0.1:3001"></iframe>
<script>
const iframe = document.getElementsByTagName('iframe')[0]
iframe.setAttribute('style', 'display: none')
const obj = {
data: 'hash'
}
iframe.src = iframe.src + '#' + JSON.stringify(obj) // ① 關(guān)鍵語(yǔ)句
</script>
</body>
B 頁(yè)面代碼示例(源為 http://127.0.0.1:3001)
window.onhashchange = function() { // ① 關(guān)鍵語(yǔ)句
console.log('來(lái)自 page2 的代碼 ' + window.location.hash) // 來(lái)自 page2 的代碼 #{"data":"hash"}
}
刷新 A 頁(yè)面，可以發(fā)現(xiàn)在控制臺(tái)打印了如下字段滞造，至此實(shí)現(xiàn)了跨域续室。
來(lái)自 page2 的代碼 #{"data":"hash"}
這種方式進(jìn)行跨域優(yōu)點(diǎn)是支持頁(yè)面和頁(yè)面間的通信，缺點(diǎn)也是只支持 GET 方法和單向的跨域通信谒养。
postMessage
為了實(shí)現(xiàn)跨文檔傳送(cross-document messaging)挺狰，簡(jiǎn)稱(chēng) XDM。HTML5 給出了一個(gè) api —— postMessage买窟，postMessage() 方法接收兩個(gè)參數(shù)：發(fā)送消息以及消息接收方所在域的字符串丰泊。代碼示例如下:
A 頁(yè)面代碼示例(源為 http://127.0.0.1:3000)
<body>
<iframe src="http://127.0.0.1:3001"></iframe>
<script>
const iframe = document.getElementsByTagName('iframe')[0]
iframe.setAttribute('style', 'display: none')
iframe.onload = function() { // 此處要等 iframe 加載完畢，后續(xù)代碼才會(huì)生效
iframe.contentWindow.postMessage('a secret', 'http://127.0.0.1:3001')
}
</script>
</body>
B 頁(yè)面代碼示例(源為 http://127.0.0.1:3001)
window.addEventListener('message', function(event) {
console.log('From page1 ' + event.data)
console.log('From page1 ' + event.origin)
}, false)
刷新 A 頁(yè)面始绍，可以發(fā)現(xiàn)在控制臺(tái)打印了如下字段瞳购，至此實(shí)現(xiàn)了跨域。
From page1 a secret
From page1 http://127.0.0.1:3000
這種跨域方式優(yōu)點(diǎn)是是支持頁(yè)面和頁(yè)面間的雙向通信亏推，缺點(diǎn)也是只能支持 GET 方法調(diào)用学赛。
WebSockets
WebSockets 屬于 HTML5 的協(xié)議，它的目的是在一個(gè)持久連接上建立全雙工通信吞杭。由于 WebSockets 采用了自定義協(xié)議盏浇，所以?xún)?yōu)點(diǎn)是客戶(hù)端和服務(wù)端發(fā)送數(shù)據(jù)量少，缺點(diǎn)是要額外的服務(wù)器篇亭〔疲基礎(chǔ)的使用方法如下：
const ws = new WebSocket('ws://127.0.0.1:3000')
ws.onopen = function() {
// 連接成功建立
}
ws.onmessage = function(event) {
// 處理數(shù)據(jù)
}
ws.onerror = function() {
// 發(fā)生錯(cuò)誤時(shí)觸發(fā)锄贷，連接中斷
}
ws.onclose = function() {
// 連接關(guān)閉時(shí)觸發(fā)
}
當(dāng)然一般我們會(huì)使用封裝好 WebSockets 的第三方庫(kù) socket.io译蒂，這里具體就不展開(kāi)了。
項(xiàng)目地址
前文所述五種跨域?qū)嵺`的 demo 已上傳至 cross-domain谊却，前端環(huán)境基于 create-react-app 搭建柔昼，后端環(huán)境用 node 搭建。
當(dāng)然跨域方式還有一些其他方式的實(shí)現(xiàn)炎辨，后續(xù)酌情慢慢填坑~
