整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
前文 《深入跨域 - 從初識(shí)到入門》 中，大家已經(jīng)對(duì)同源與跨域的產(chǎn)生歷史與重要性等有了一個(gè)初步的了解了，那么我們應(yīng)該如何解決在日常開發(fā)中遇到的跨域引起的問題呢？
我們將日常開發(fā)中的跨域解決方案大體分為兩類：iframe跨域 與 API跨域:
??
??
otherWindow.postMessage(message，targetOrigin) 方法是 HTML5 引進(jìn)的特性，可以使用它來向其它的 window 對(duì)象發(fā)送消息，無論這個(gè) window 對(duì)象是屬于同源或不同源，使用起來也比較簡(jiǎn)單。
調(diào)用 postMessage 方法的 window 對(duì)象是指要接收消息的那一個(gè) window 對(duì)象，該方法的第一個(gè)參數(shù) message 為要發(fā)送的消息，類型只能為字符串；第二個(gè)參數(shù) targetOrigin 用來限定接收消息的那個(gè) window 對(duì)象所在的域，如果不想限定域，可以使用通配符 *。
需要接收消息的 window 對(duì)象，可以通過監(jiān)聽自身的 message 事件來獲取傳過來的消息，消息內(nèi)容儲(chǔ)存在該事件對(duì)象的 data 屬性中。
??
A頁面向B頁面發(fā)送信息：
發(fā)送信息 - 頁面 http://a.com/index.html 的代碼：
<iframe src="http://b.com/index.html" id="myIframe" onload="test()" style="display: none;" />
<script>
// 1. iframe載入 http://b.com/index.html 頁面后會(huì)執(zhí)行該函數(shù)
function test() {
// 2. 獲取 http://b.com/index.html 頁面的 window 對(duì)象，
// 然后通過 postMessage 向 http://b.com/index.html 頁面發(fā)送消息
var iframe=document.getElementById('myIframe');
var win=iframe.contentWindow;
win.postMessage('我是來自 http://a.com/index.html 頁面的消息', '*');
}
</script>接收信息 - 頁面 http://b.com/index.html 的代碼：
<script type="text/javascript">
// 注冊(cè) message 事件用來接收消息
window.onmessage=function(e) {
e=e || event; // 獲取事件對(duì)象
console.log(e.data); // 通過 data 屬性得到發(fā)送來的消息
}
</script>?data：從其他 window 中傳遞過來的對(duì)象。
?origin：調(diào)用 postMessage 時(shí)消息發(fā)送方窗口的origin源。這個(gè)字符串由 協(xié)議 + :// + 域名 + : 端口號(hào) 拼接而成，例如“https://a.com (隱含端口 80)”。
?source：對(duì)發(fā)送消息的窗口對(duì)象的引用。可以使用此來在具有不同 origin 的兩個(gè)窗口之間建立雙向通信。
document.domain可用于獲取及配置document文檔的原始域，此方式只能用于二級(jí)域名相同的情況下。
反面舉例：
a.com的一個(gè)網(wǎng)頁(a.html)里面 利用iframe引入了一個(gè)b.com里的一個(gè)網(wǎng)頁(b.html)。
這時(shí)在a.html里面可以看到b.html里的內(nèi)容，但是卻不能利用javascript來操作它。因?yàn)檫@兩個(gè)頁面屬于不同的域，在操作之前，瀏覽器會(huì)檢測(cè)兩個(gè)頁面的域是否相等，如果相等，就允許其操作，如果不相等，就會(huì)拒絕操作。
這時(shí)，當(dāng)我們利用document.domain把a(bǔ).com與b.com改成同一個(gè)域時(shí)，會(huì)報(bào)"參數(shù)無效錯(cuò)誤"，因?yàn)樗鼈兊亩?jí)域名不相同。
而當(dāng)我們嘗試設(shè)置為com時(shí)，會(huì)報(bào)錯(cuò)：“com是頂級(jí)域名”。
所以需要注意：document.domain 實(shí)現(xiàn)跨域的方法存在局限性：需要保證二級(jí)域名、協(xié)議、端口一致才可以。
正面舉例：
??
比如，有一個(gè)頁面，它的地址是 http://a.test.com/index.html，在這個(gè)頁面里面有一個(gè) iframe，它的 src 是 http://b.test.com/index.html。很顯然，這個(gè)頁面與它里面的 iframe 框架是不同域的，所以我們是無法通過在頁面中書寫 js 代碼來獲取 iframe 中的東西的。
這個(gè)時(shí)候，document.domain 就可以派上用場(chǎng)了，我們只要在 http://a.test.com/index.html 和 http://b.test.com/index.html 這兩個(gè)頁面的index.html中都加入：
代碼如下:
document.domain="test.com";把document.domain 都設(shè)成相同的域名就可以了。
下面我們來看一下使用本方法需要注意的兩個(gè)點(diǎn)：
?正如我們?cè)谏厦娴姆疵媾e例中強(qiáng)調(diào)的，document.domain 的設(shè)置是有限制的，我們只能把 document.domain 設(shè)置成自身或更高一級(jí)的父域，且二級(jí)域名必須相同。例如：a.test.com 中某個(gè)文檔的 document.domain 可以設(shè)成 a.test.com、test.com 中的任意一個(gè)，但是不可以設(shè)成 b.test.com，也不可以設(shè)成 baidu.com。
?另外，可能有人疑惑為什么兩個(gè)頁面都需要設(shè)置 document.domain 呢？因?yàn)樵O(shè)置document.domain的同時(shí)，會(huì)把端口重置為null，因此如果只設(shè)置一個(gè)頁面的document.domain，會(huì)導(dǎo)致兩個(gè)網(wǎng)址的端口不同，還是達(dá)不到同源的目的。
潛在的安全隱患：
2022年1月11日，Chrome developer 博客發(fā)布了這么一篇文章。
??
大致意思是，Chrome未來將禁用修改document.domain。如果你的網(wǎng)站依賴于設(shè)置document.domain 來解決跨域的問題，那么你可能需要注意了。
而禁止修改的原因主要是：這個(gè)改變放寬了同源策略，使父頁面可以訪問 iframe 的文檔并遍歷 DOM 樹，反之亦然。而這種行為引入了極大的安全隱患，主要是針對(duì)具有不同子域的共享托管服務(wù)。document.domain的設(shè)置放開了對(duì)同一服務(wù)托管的所有其他站點(diǎn)的訪問，這使攻擊者更容易訪問您的站點(diǎn)，因?yàn)閐ocument.domain忽略了域的端口號(hào)部分。
這是一個(gè)比較奇特的方法，比如有一個(gè)這樣的url：http://a.com#hello，那么我們通過執(zhí)行l(wèi)ocation.hash就可以得到這樣的一個(gè)字符串#hello，同時(shí)改變hash頁面是不會(huì)刷新的。
假如現(xiàn)在我們有A頁面在a.com，B頁面在b.com，服務(wù)端運(yùn)行地址為b.com。我們?cè)贏頁面中通過iframe嵌套B頁面。
?從A頁面要傳數(shù)據(jù)到B頁面
我們?cè)贏頁面中通過，修改iframe的src的方法來修改hash的內(nèi)容。然后在B頁面中添加setInterval定時(shí)器或者h(yuǎn)ashchange事件來監(jiān)聽我們的hash是否改變，如果改變那么就執(zhí)行相應(yīng)的操作。比如向后臺(tái)服務(wù)器提交數(shù)據(jù)或者上傳圖片這些。
此時(shí)，B頁面域名為b.com，與服務(wù)端同域，不會(huì)出現(xiàn)跨域問題。
?從B頁面?zhèn)鬟f數(shù)據(jù)到A頁面
??
經(jīng)過上面的方法，我們已經(jīng)從服務(wù)端拿到了數(shù)據(jù)，那么如何發(fā)送給A頁面呢？肯定有同學(xué)在想，從B頁面向A頁面發(fā)送數(shù)據(jù)就是修改A頁面的hash值了。對(duì)沒錯(cuò)，方法就是這樣，但是在執(zhí)行的時(shí)候會(huì)出現(xiàn)一些問題。我們?cè)贐頁面中直接：
parent.location.hash="#xxxx"這樣是不行的，因?yàn)榍懊嫣岬竭^的同源策略不能直接修改父級(jí)的hash值，所以這里采用了一個(gè)代理頁面的方法。部分代碼：
在b.com域名下的index.html：
try {
parent.location.hash='hello';
} catch (e) {
// ie、chrome的同源安全機(jī)制無法修改parent.location.hash，
// 所以要利用一個(gè)中間的a.com域下的代理iframe修改location.hash
// 如 A=> B=> C，其中，當(dāng)前頁面為B,AC在同一域名下
// B不能直接修改A的hash值，故修改C，然后由C修改A
const ifrproxy=document.createElement('iframe');
ifrproxy.style.display='none';
// 注意該文件在"a.com"域下
ifrproxy.src='http://a.com/c.html#hello';
document.body.appendChild(ifrproxy);
}我們可以利用try...catch...進(jìn)行一個(gè)兼容。如果可以直接修改我們就直接修改，如果不能直接修改，那么我們?cè)贐頁面中再添加一個(gè)iframe然后指向C頁面(我們暫時(shí)叫他代理頁面C，此頁面和A頁面是在相同的一個(gè)域下面)，我們可以用同樣的方法在url后面添加需要傳遞的信息。在代理頁面中：
parent.parent.location.hash=self.location.hash.substring(1);只需要寫這樣的一段js代碼就完成了修改A頁面的hash值。
下面，我們只需要對(duì)A頁面中hash值的變化進(jìn)行監(jiān)聽：
?可以通過添加一個(gè)setInterval事件，來監(jiān)聽hash值的改變
?可以通過hashchange事件監(jiān)聽
// http://a.com/index.html
window.onhashchange=checkMessage;
function checkMessage() {
var message=window.location.hash;
// ...
}實(shí)現(xiàn)的核心思路就是通過修改URL的hash值，然后用定時(shí)器或hashchange事件來監(jiān)聽值的改變。
這種方法存在諸多的缺點(diǎn)，并不推薦，只是簡(jiǎn)單介紹一下：
?傳遞的數(shù)據(jù)會(huì)直接在URL里面顯示出來，不是很安全
?傳輸?shù)臄?shù)據(jù)容量和類型都有限
window 對(duì)象有個(gè) name 屬性，該屬性有個(gè)特征：即在一個(gè)窗口（window）的生命周期內(nèi)，窗口載入的所有的頁面（不管是相同域的頁面還是不同域的頁面）都是共享一個(gè) window.name 的，每個(gè)頁面對(duì) window.name 都有讀寫的權(quán)限，window.name 是持久存在一個(gè)窗口載入過的所有頁面中的，并不會(huì)因新頁面的載入而進(jìn)行重置。
如果name值沒有修改，那么它將不會(huì)變化，并且這個(gè)值可以非常的長(2MB)。
通過下面的例子介紹如何通過 window.name 來跨域獲取數(shù)據(jù)的。
??
頁面 http://b.com/index.html 的代碼：
<script type="text/javascript">
// 1. 給當(dāng)前的 window.name 設(shè)置一個(gè) http://a.com/index.html 頁面想要得到的數(shù)據(jù)值
window.name="hello world!";
</script>頁面 http://a.com/index.html 的代碼：
<iframe src="http://b.com/index.html" id="myIframe" onload="test()" style="display: none;" />
<script>
// 2. iframe載入 "http://b.com/index.html 頁面后會(huì)執(zhí)行該函數(shù)
function test() {
const iframe=document.getElementById('myIframe');
// 重置 iframe 的 onload 事件程序，
// 此時(shí)經(jīng)過后面代碼重置 src 之后，
// http://a.com/index.html 頁面與該 iframe 在同一個(gè)源了，可以相互訪問了
iframe.onload=function() {
// 4. 獲取 iframe 里的 window.name
var data=iframe.contentWindow.name;
console.log(data); // hello world!
};
// 3. 重置一個(gè)與 http://a.com/index.html 頁面同源的頁面
iframe.src='http://a.com/c.html';
}
</script方法原理：A頁面通過iframe加載B頁面。B頁面獲取完數(shù)據(jù)后，把數(shù)據(jù)賦值給window.name。然后在A頁面中修改iframe使他指向本域的一個(gè)頁面。這樣在A頁面中就可以直接通過 iframe.contentWindow.name 獲取到B頁面中獲取到的數(shù)據(jù)。
JSONP(JSON with Padding) 是 json 的一種"使用模式"，可以讓網(wǎng)頁從別的域名（網(wǎng)站）那獲取資料，即跨域讀取數(shù)據(jù)。
原理：
?在當(dāng)前頁面中，通過script標(biāo)簽加載指定資源路徑，并利用這個(gè)請(qǐng)求路徑傳遞數(shù)據(jù)。
?我們需要知道，對(duì)于script標(biāo)簽請(qǐng)求回來的內(nèi)容，瀏覽器會(huì)作為腳本執(zhí)行。
?所以，針對(duì)當(dāng)前頁面所需要的數(shù)據(jù)，跨域的服務(wù)端把數(shù)據(jù)放進(jìn)當(dāng)前頁面本地的一個(gè)js方法里，當(dāng)前頁面在獲取到script標(biāo)簽的內(nèi)容后會(huì)執(zhí)行此方法，在本地的js對(duì)返回的數(shù)據(jù)進(jìn)行處理。這樣就實(shí)現(xiàn)了不同域名下的兩個(gè)站點(diǎn)間的交流。
??
// http://a.com/index.html
// 1. 定義一個(gè) 回調(diào)函數(shù) handleResponse 用來接收返回的數(shù)據(jù)
function handleResponse(data) {
console.log(data);
};
// 2. 動(dòng)態(tài)創(chuàng)建一個(gè) script 標(biāo)簽，并且告訴后端回調(diào)函數(shù)名叫 handleResponse
var body=document.getElementsByTagName('body')[0];
var script=document.createElement('script');
script.src='http://b.com/api?callback=handleResponse';
body.appendChild(script);
// 3. 通過 script.src 請(qǐng)求 `http://b.com/api?callback=handleResponse`，
// 4. 后端能夠識(shí)別這樣的 URL 格式并處理該請(qǐng)求，然后返回 handleResponse(JSON.stringify({ "data": "hello" })) 給瀏覽器
// 5. 前端在接收到 handleResponse({ "data": "hello" }) 之后立即執(zhí)行 ，也就是執(zhí)行 handleResponse 方法，獲得后端返回的數(shù)據(jù)，這樣就完成一次跨域請(qǐng)求了服務(wù)端 - Node：
// http://b.com/api
const http=require('http');
const urllib=require('url');
const port=80;
http.createServer(function (req, res) {
const { query }=urllib.parse(req.url, true);
if (query && query.callback) {
const { callback }=query
const data={ "data": "hello" }
const str=`${callback}(${JSON.stringify(data)})` // 拼成callback(data)
res.end(str);
} else {
res.end(JSON.stringify('啥也沒有啊你'));
}
}).listen(port, function () {
console.log('server is listening on port ' + port);
}JSONP的實(shí)現(xiàn)流程
1.前端：
?聲明一個(gè)回調(diào)函數(shù)（如handleResponse），其函數(shù)名當(dāng)做參數(shù)值，要傳遞給跨域請(qǐng)求數(shù)據(jù)的服務(wù)器，函數(shù)形參為要獲取的目標(biāo)數(shù)據(jù)（服務(wù)器返回的data）。
?創(chuàng)建一個(gè)<script>標(biāo)簽，把那個(gè)跨域的API數(shù)據(jù)接口地址，賦值給script的src，還要在這個(gè)地址中向服務(wù)器傳遞該函數(shù)名（可以作為url的查詢字符串:?callback=handleResponse）。
1.服務(wù)端：
?服務(wù)器接收到請(qǐng)求后，需要根據(jù)約定的字段callback進(jìn)行特殊的處理：把傳遞進(jìn)來的函數(shù)名和需要傳遞的數(shù)據(jù)拼接成一個(gè)字符串，例如：傳遞進(jìn)來的函數(shù)名是handleResponse，需要傳遞的數(shù)據(jù){ "data": "hello" }。最終拼接的字符串是handleResponse(JSON.stringify({ "data": "hello" }))。
?最后服務(wù)器把準(zhǔn)備的數(shù)據(jù)通過HTTP協(xié)議返回給前端，前端會(huì)將返回的報(bào)文作為js執(zhí)行，從而調(diào)用之前聲明的回調(diào)函數(shù)（handleResponse），對(duì)返回的數(shù)據(jù)進(jìn)行操作。
優(yōu)點(diǎn)
?它不像XMLHttpRequest 對(duì)象實(shí)現(xiàn) Ajax 請(qǐng)求那樣受到同源策略的限制
?簡(jiǎn)單，兼容性好，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問問題。
?不需要 XMLHttpRequest 等的支持；并且在請(qǐng)求完畢后可以通過調(diào)用 callback 的方式回傳結(jié)果。
缺點(diǎn)
?僅支持 GET 請(qǐng)求，具有局限性。
?安全問題。
?無法捕獲JSONP請(qǐng)求時(shí)的連接異常。
在關(guān)于同源策略的概述中，我們知道了當(dāng)一個(gè)資源從與該資源本身所在的服務(wù)器不同的域、協(xié)議或端口請(qǐng)求一個(gè)資源時(shí)，需要發(fā)起一個(gè)跨域 HTTP 請(qǐng)求。
而跨域資源共享（CORS） 是一個(gè)W3C標(biāo)準(zhǔn)，全稱是"跨域資源共享"（Cross-origin resource sharing），定義了在必須訪問跨域資源時(shí)，瀏覽器與服務(wù)器應(yīng)該如何溝通。
CORS使用自定義的 HTTP 頭來告訴瀏覽器，讓運(yùn)行在一個(gè)origin(domain) 上的Web應(yīng)用被準(zhǔn)許訪問來自不同源服務(wù)器上的指定的資源。
簡(jiǎn)單來說，就是允許服務(wù)器聲明哪些源站通過瀏覽器有權(quán)限訪問哪些資源。
其實(shí)對(duì)于跨域資源的請(qǐng)求，瀏覽器已經(jīng)把我們的請(qǐng)求發(fā)放給了服務(wù)器，瀏覽器也接受到了服務(wù)器的響應(yīng)，只是瀏覽器一看我們兩個(gè)的域不一樣就把消息給攔截了，不給我們顯示。所以如果在服務(wù)器就告訴瀏覽器這個(gè)數(shù)據(jù)是每個(gè)源都可以獲取的就可以了。這就是CORS跨域資源共享。
這樣的話，任何源都可以通過AJAX發(fā)起請(qǐng)求來獲取我們提供的數(shù)據(jù)。針對(duì)不同語言的服務(wù)器后端有不一樣的處理方法，但是實(shí)質(zhì)是一樣的。允許瀏覽器向跨域服務(wù)器發(fā)出XMLHttpRequest請(qǐng)求，從而克服了AJAX只能同源使用的限制。
CORS需要瀏覽器和服務(wù)器同時(shí)支持。目前，幾乎所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。
瀏覽器端：
目前，所有瀏覽器都支持該功能（IE10以下不行）。整個(gè)CORS通信過程，都是瀏覽器自動(dòng)完成，不需要用戶參與。
服務(wù)端：
CORS通信與AJAX沒有任何差別，因此不需要改變以前的業(yè)務(wù)邏輯。只不過，瀏覽器會(huì)在請(qǐng)求中攜帶一些頭信息，我們需要以此判斷是否允許其跨域，然后在響應(yīng)頭中加入一些信息即可。這一般通過過濾器完成即可
??
我們先來看一下一個(gè)CORS請(qǐng)求的完整過程是怎么完成的：
??
如上圖所示，我們可以看到在CORS過程中有一個(gè)預(yù)檢請(qǐng)求 preflight request (if necessary)，那么是否執(zhí)行預(yù)檢的標(biāo)準(zhǔn)是什么呢？我們先來大概了解一下，后面會(huì)對(duì)具體的劃分標(biāo)準(zhǔn)進(jìn)行詳述。
對(duì)那些可能對(duì)服務(wù)器數(shù)據(jù)產(chǎn)生副作用的 HTTP 請(qǐng)求方法（特別是 GET 以外的 HTTP 請(qǐng)求，或者搭配特殊Content-Type信息的 POST 請(qǐng)求），瀏覽器在發(fā)送真正的請(qǐng)求之前，必須首先使用 OPTIONS 方法發(fā)起一個(gè)預(yù)檢請(qǐng)求（preflight request），從而獲知服務(wù)端是否允許該跨域請(qǐng)求。
服務(wù)器確認(rèn)允許之后，才發(fā)起實(shí)際的 HTTP 請(qǐng)求。在預(yù)檢請(qǐng)求的返回中，服務(wù)器端也可以通知客戶端，是否需要攜帶身份憑證（包括 Cookies 和 HTTP 認(rèn)證相關(guān)數(shù)據(jù)）。
下面我們來具體看一下，CORS請(qǐng)求是否執(zhí)行預(yù)檢的具體判斷標(biāo)準(zhǔn)是什么？
瀏覽器將CORS請(qǐng)求分成兩類：簡(jiǎn)單請(qǐng)求（simple request）和非簡(jiǎn)單請(qǐng)求（not-so-simple request）。其中，簡(jiǎn)單請(qǐng)求就是某些不會(huì)觸發(fā)CORS預(yù)檢的請(qǐng)求，那么與之對(duì)應(yīng)的，非簡(jiǎn)單請(qǐng)求就會(huì)觸發(fā)預(yù)檢請(qǐng)求了。
至于簡(jiǎn)單請(qǐng)求與非簡(jiǎn)單請(qǐng)求是如何確認(rèn)的呢，我們接著往下看。
請(qǐng)求方法是以下三種方法之一：
?GET
?POST
?HEAD（與get請(qǐng)求類似，是一種只發(fā)送請(qǐng)求不會(huì)收到響應(yīng)的請(qǐng)求方式，通常單純是為了判斷某個(gè)資源是否存在，比get意義更加明確，日常用的比較少）
HTTP的頭信息不超出以下幾種字段：
?Accept
?Accept-Language
?Content-Language
?Content-Type：只限于三個(gè)值 application/x-www-form-urlencoded（一般用于表單移交，不支持文件上傳，以key1=val1&key2=val2的方式提交）、multipart/form-data（用于在表單進(jìn)行文件上傳）、text/plain（用于數(shù)據(jù)以純文本形式編碼）
??
綜上，凡是不同時(shí)滿足上面兩個(gè)條件，就屬于非簡(jiǎn)單請(qǐng)求。
瀏覽器對(duì)這兩種請(qǐng)求的處理，是不一樣的。
下面通過簡(jiǎn)單的區(qū)分 headers.Content-Type，實(shí)現(xiàn)CORS簡(jiǎn)單請(qǐng)求與復(fù)雜請(qǐng)求
fetch('https://www.baidu.com/', {
method: 'POST',
headers: {
'Content-Type': 'text/plain',
}
})
.then((resp)=> resp.text())
.then(console.log)??
?在請(qǐng)求中會(huì)附加一個(gè)額外的 Origin 頭部，其中包含請(qǐng)求頁面的源信息（協(xié)議、域名和端口），以便服務(wù)器根據(jù)這個(gè)頭部信息來決定是否給予響應(yīng)。例如：Origin: http://a.jdl.com
?如果服務(wù)器認(rèn)為這個(gè)請(qǐng)求可以接受，就在 Access-Control-Allow-Origin 頭部中回復(fù)相同的源信息。例如：Access-Control-Allow-Origin：http://a.jdl.com
?如果需要包含 cookie 信息，ajax 請(qǐng)求需要設(shè)置 xhr 的屬性 withCredentials 為 true，服務(wù)器需要設(shè)置響應(yīng)頭部 Access-Control-Allow-Credentials: true。
fetch('https://www.baidu.com/', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
}
})
.then((resp)=> resp.text())
.then(console.log)??
上圖中，我們可以看到，瀏覽器在發(fā)送真正的請(qǐng)求之前，會(huì)先發(fā)送一個(gè) Preflight 請(qǐng)求給服務(wù)器，這種請(qǐng)求使用 OPTIONS 方法，發(fā)送下列頭部：
?Origin：與簡(jiǎn)單的請(qǐng)求相同。
?Access-Control-Request-Method: 請(qǐng)求自身使用的方法。
?Access-Control-Request-Headers: 自定義的頭部信息，多個(gè)頭部以逗號(hào)分隔。
例如：
Origin: http://a.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: authorization,content-type,lop-dn,md5-content,token??
發(fā)送這個(gè)請(qǐng)求后，服務(wù)器可以決定是否允許這種類型的請(qǐng)求。服務(wù)器通過在響應(yīng)中發(fā)送如下頭部與瀏覽器進(jìn)行溝通：
?Access-Control-Allow-Origin：
?Access-Control-Allow-Methods: 允許的方法，多個(gè)方法以逗號(hào)分隔。
?Access-Control-Allow-Headers: 允許的頭部，多個(gè)方法以逗號(hào)分隔。
?Access-Control-Max-Age: 應(yīng)該將這個(gè) Preflight 請(qǐng)求緩存多長時(shí)間（以秒表示）。
例如：
Access-Control-Allow-Origin: http://a.jdl.com
Access-Control-Allow-Methods: POST
Access-Control-Allow-Headers: authorization,content-type,lop-dn,md5-content,token
Access-Control-Max-Age: 1728000一旦服務(wù)器通過 Preflight 請(qǐng)求允許該請(qǐng)求之后，以后每次瀏覽器正常的 CORS 請(qǐng)求，就都跟簡(jiǎn)單請(qǐng)求一樣了，如下：
??
跨域原理：同源策略是瀏覽器對(duì)XMLHttpRequest等的安全策略，不是HTTP協(xié)議的一部分。服務(wù)器端調(diào)用HTTP接口只是使用HTTP協(xié)議，不會(huì)執(zhí)行JS腳本，不需要同源策略，也就不存在跨越問題。
所以，同源策略只是瀏覽器的一個(gè)策略而已，它是限制不到后端的，也就是前端->后端會(huì)被同源策略限制，但是后端->后端則不會(huì)被限制。
因此，可以通過Nginx代理，先訪問已設(shè)置CORS的【Nginx代理服務(wù)】，再讓【Nginx代理服務(wù)】去訪問【業(yè)務(wù)服務(wù)端】獲取數(shù)據(jù)到【Nginx代理服務(wù)】，【Nginx代理服務(wù)】再把數(shù)據(jù)傳到前端。
實(shí)現(xiàn)思路：通過nginx配置一個(gè)代理服務(wù)器（http://b.com）做跳板機(jī)，反向代理訪問http://c.com接口。
??
注意：其實(shí)Nginx等中間服務(wù)器的出現(xiàn)，主要是針對(duì)服務(wù)端不適合直接設(shè)置CORS跨域的情況，需要用過中間服務(wù)進(jìn)行API跨域的處理。
其實(shí)Node接口代理跟Nginx是一個(gè)道理，都是把請(qǐng)求發(fā)給一個(gè)中間服務(wù)，只不過這里是我們利用Node自己搭建了一個(gè)代理服務(wù)器。
??
// index.html http://a.com
// 步驟一：創(chuàng)建異步對(duì)象
const ajax=new XMLHttpRequest();
//步驟二：設(shè)置請(qǐng)求的url參數(shù),參數(shù)一是請(qǐng)求的類型,參數(shù)二是請(qǐng)求的url,可以帶參數(shù),動(dòng)態(tài)的傳遞參數(shù)到服務(wù)端
ajax.open('get', 'http://b.com/proxy?name=Alex&age=18');
//步驟三：發(fā)送請(qǐng)求
ajax.send();
//步驟四：注冊(cè)事件，onreadystatechange狀態(tài)改變就會(huì)調(diào)用
ajax.onreadystatechange=function () {
if (ajax.readyState==4 && ajax.status==200) {
//步驟五：如果能夠進(jìn)到這個(gè)判斷，說明數(shù)據(jù)完美的回來了
console.log(ajax.responseText); // 輸入相應(yīng)的內(nèi)容
}
}// http://b.com/proxy
const http=require('http');
const urllib=require('url');
const querystring=require('querystring');
const port=80;
http.createServer(function (req, res) {
// 開啟CORS
res.writeHead(200, {
//設(shè)置允許跨域的域名，也可設(shè)置*允許所有域名
'Access-Control-Allow-Origin': 'http://a.com',
//跨域允許的請(qǐng)求方法，也可設(shè)置*允許所有方法
"Access-Control-Allow-Methods": "DELETE,PUT,POST,GET,OPTIONS",
//允許的header類型
'Access-Control-Allow-Headers': 'Content-Type'
})
const { query }=urllib.parse(req.url, true);
const { methods='GET', headers }=req
const proxyReq=http.request({
host: 'http://c.com',
path: `/?${querystring.stringify(query)}`,
methods,
headers
}, proxyRes=> {
proxyRes.on('data', chunk=> {
console.log(chunk.toString())
res.end(chunk.toString())
})
}).end()
}).listen(port, function () {
console.log('server is listening on port ' + port);
}// http://c.com
const http=require('http');
const urllib=require('url');
const port=80;
http.createServer(function (req, res) {
const { query: { name, age } }=urllib.parse(req.url, true);
res.end(`${name}今年${age}歲啦！！！`);
}).listen(port, function () {
console.log('server is listening on port ' + port);
}WebSocket 是 HTML5 標(biāo)準(zhǔn)的一個(gè)新的網(wǎng)絡(luò)協(xié)議。它是基于 HTTP 協(xié)議之上的擴(kuò)展，是一種可以雙向通信的協(xié)議。
實(shí)現(xiàn)了瀏覽器與服務(wù)器全雙工通信，能更好的節(jié)省服務(wù)器資源和帶寬并達(dá)到實(shí)時(shí)通訊。
在建立連接后，WebSocket 服務(wù)器和 客戶端 都能主動(dòng)的向?qū)Ψ桨l(fā)送或接收數(shù)據(jù)。
傳統(tǒng)的 HTTP 協(xié)議 通信，服務(wù)端是不能主動(dòng)發(fā)信息給客戶端的。必須是客戶端一個(gè)請(qǐng)求，服務(wù)器一個(gè)響應(yīng)，一來一回。那么基于這種通信的方式，如果想構(gòu)建一個(gè)網(wǎng)絡(luò)在線聊天應(yīng)用，就沒有辦法，因?yàn)椴荒苤鲃?dòng)推送信息，需要客戶端一直輪詢。
那么問題來了，為什么WebSocket 可以跨域呢？
因?yàn)橥床呗詢H僅是針對(duì)HTTP的，因此WebSocket 沒有同源限制，客戶端可以發(fā)送任意請(qǐng)求到服務(wù)端，只要目標(biāo)服務(wù)器允許。WebSocket可以跟 HTTP 協(xié)議共用一個(gè)端口，它協(xié)議的前綴是 ws://，如果是 HTTPS，那么就是 wss://。
websocket請(qǐng)求的請(qǐng)求頭中會(huì)像CORS一樣加入origin字段，服務(wù)端可以根據(jù)自身需要，以這個(gè)字段來判斷是否通過該請(qǐng)求。
??
??
?server.js
// http://b.com
const WebSocket=require('ws')
const WebSocketServer=WebSocket.Server
// 創(chuàng)建 websocket 服務(wù)器 監(jiān)聽在 3000 端口
const wss=new WebSocketServer({ port: 3000 })
// 服務(wù)器被客戶端連接
wss.on('connection', (ws)=> {
// 通過 ws 對(duì)象，就可以獲取到客戶端發(fā)送過來的信息和主動(dòng)推送信息給客戶端
let i=0
setInterval(function f() {
ws.send(i++) // 每隔 1 秒給連接方報(bào)一次數(shù)
}, 1000)
}?client.js
// http://a.com
const WebSocket=require('ws')
const ws=new WebSocket('ws://b.com:3000')
// 接受
ws.on('message', (message)=> {
console.log(message)
// 當(dāng)數(shù)字達(dá)到 10 時(shí)，斷開連接
if (message==10) {
ws.send('close')
ws.close()
}
}以上，我們完成了對(duì)同源與跨域的理論認(rèn)識(shí)與解決方案的學(xué)習(xí)。針對(duì)不同解決方案的適用場(chǎng)景，在什么情況下應(yīng)該使用哪種方案，大家應(yīng)該具體問題具體分析，根據(jù)不同方案的優(yōu)缺點(diǎn)進(jìn)行對(duì)比選擇。
者：強(qiáng)哥科技興
鏈接：https://www.jianshu.com/p/383c3f3d2966
什么是跨域
JavaScript出于安全方面的考慮，不允許跨域調(diào)用其他頁面的對(duì)象。那什么是跨域呢，簡(jiǎn)單地理解就是因?yàn)镴avaScript同源策略的限制，a.com域名下的js無法操作b.com或是c.a.com域名下的對(duì)象。
當(dāng)協(xié)議、子域名、主域名、端口號(hào)中任意一個(gè)不相同時(shí)，都算作不同域。不同域之間相互請(qǐng)求資源，就算作“跨域”。
有一點(diǎn)必須要注意：跨域并不是請(qǐng)求發(fā)不出去，請(qǐng)求能發(fā)出去，服務(wù)端能收到請(qǐng)求并正常返回結(jié)果，只是結(jié)果被瀏覽器攔截了。之所以會(huì)跨域，是因?yàn)槭艿搅送床呗缘南拗疲床呗砸笤聪嗤拍苷＿M(jìn)行通信，即協(xié)議、域名、端口號(hào)都完全一致。
大家可以參照下圖，有助于深入理解跨域。
特別說明兩點(diǎn)：
第一：如果是協(xié)議和端口造成的跨域問題“前臺(tái)”是無能為力的。
第二：在跨域問題上，域僅僅是通過“URL的首部”來識(shí)別而不會(huì)根據(jù)域名對(duì)應(yīng)的IP地址是否相同來判斷。“URL的首部”可以理解為“協(xié)議, 域名和端口必須匹配”。
什么是同源策略及其限制
同源策略限制從一個(gè)源加載的文檔或腳本如何與來自另一個(gè)源的資源進(jìn)行交互。這是一個(gè)用于隔離潛在惡意文件的關(guān)鍵的安全機(jī)制。它的存在可以保護(hù)用戶隱私信息，防止身份偽造等(讀取Cookie)。
同源策略限制內(nèi)容有：
Cookie、LocalStorage、IndexedDB 等存儲(chǔ)性內(nèi)容
DOM 節(jié)點(diǎn)
AJAX 請(qǐng)求不能發(fā)送
但是有三個(gè)標(biāo)簽是允許跨域加載資源：
接下來我們討論下有哪些處理跨域的方法。但所有的跨域都必須經(jīng)過信息提供方的允許。如果未經(jīng)允許即可獲取，那是瀏覽器同源策略出現(xiàn)漏洞。
處理跨域方法一——JSONP
1.JSONP原理
利用<script>元素的這個(gè)開放策略，網(wǎng)頁可以得到從其他來源動(dòng)態(tài)產(chǎn)生的 JSON 數(shù)據(jù)。JSONP請(qǐng)求一定需要對(duì)方的服務(wù)器做支持才可以。
2.JSONP和AJAX對(duì)比
JSONP和AJAX相同，都是客戶端向服務(wù)器端發(fā)送請(qǐng)求，從服務(wù)器端獲取數(shù)據(jù)的方式。但AJAX屬于同源策略，JSONP屬于非同源策略（跨域請(qǐng)求）
3.JSONP優(yōu)缺點(diǎn)
JSONP優(yōu)點(diǎn)是兼容性好，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。缺點(diǎn)是僅支持get方法具有局限性。
4.JSONP的流程(以第三方API地址為例，不必考慮后臺(tái)程序)
聲明一個(gè)回調(diào)函數(shù)，其函數(shù)名(如fn)當(dāng)做參數(shù)值，要傳遞給跨域請(qǐng)求數(shù)據(jù)的服務(wù)器，函數(shù)形參為要獲取目標(biāo)數(shù)據(jù)(服務(wù)器返回的data)。
創(chuàng)建一個(gè)<script>標(biāo)簽，把那個(gè)跨域的API數(shù)據(jù)接口地址，賦值給script的src,還要在這個(gè)地址中向服務(wù)器傳遞該函數(shù)名（可以通過問號(hào)傳參:?callback=fn）。
服務(wù)器接收到請(qǐng)求后，需要進(jìn)行特殊的處理：把傳遞進(jìn)來的函數(shù)名和它需要給你的數(shù)據(jù)拼接成一個(gè)字符串,例如：傳遞進(jìn)去的函數(shù)名是fn，它準(zhǔn)備好的數(shù)據(jù)是fn([{"name":"jianshu"}]）。
最后服務(wù)器把準(zhǔn)備的數(shù)據(jù)通過HTTP協(xié)議返回給客戶端，客戶端再調(diào)用執(zhí)行之前聲明的回調(diào)函數(shù)（fn），對(duì)返回的數(shù)據(jù)進(jìn)行操作。
其中 fn 是客戶端注冊(cè)的回調(diào)的函數(shù),目的獲取跨域服務(wù)器上的json數(shù)據(jù)后，對(duì)數(shù)據(jù)進(jìn)行在處理。
最后服務(wù)器返回給客戶端數(shù)據(jù)的格式為:
5.jQuery的jsonp形式
JSONP都是GET和異步請(qǐng)求的，不存在其他的請(qǐng)求方式和同步請(qǐng)求，且jQuery默認(rèn)就會(huì)給JSONP的請(qǐng)求清除緩存。
處理跨域方法二——CORS
1.CORS原理
整個(gè)CORS通信過程，都是瀏覽器自動(dòng)完成，不需要用戶參與。對(duì)于開發(fā)者來說，CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。瀏覽器一旦發(fā)現(xiàn)AJAX請(qǐng)求跨源，就會(huì)自動(dòng)添加一些附加的頭信息，有時(shí)還會(huì)多出一次附加的請(qǐng)求，但用戶不會(huì)有感覺。因此，實(shí)現(xiàn)CORS通信的關(guān)鍵是服務(wù)器。只要服務(wù)器實(shí)現(xiàn)了CORS接口，就可以跨源通信。
2.CORS優(yōu)缺點(diǎn)
CORS要求瀏覽器(>IE10)和服務(wù)器的同時(shí)支持，是跨域的根本解決方法，由瀏覽器自動(dòng)完成。
優(yōu)點(diǎn)在于功能更加強(qiáng)大支持各種HTTP Method，缺點(diǎn)是兼容性不如JSONP。
只需要在服務(wù)器端做一些小小的改造即可：
例如：網(wǎng)站http://localhost:{{63342:0}}/ 頁面要請(qǐng)求http://localhost:3000/users/userlist 頁面，userlist頁面返回json字符串格{name: 'Mr.Cao', gender: 'male', career: 'IT Education'}
在響應(yīng)頭上添加Access-Control-Allow-Origin屬性，指定同源策略的地址。同源策略默認(rèn)地址是網(wǎng)頁的本身。只要瀏覽器檢測(cè)到響應(yīng)頭帶上了CORS，并且允許的源包括了本網(wǎng)站，那么就不會(huì)攔截請(qǐng)求響應(yīng)。
處理跨域方法三——WebSocket
Websocket是HTML5的一個(gè)持久化的協(xié)議，它實(shí)現(xiàn)了瀏覽器與服務(wù)器的全雙工通信，同時(shí)也是跨域的一種解決方案。WebSocket和HTTP都是應(yīng)用層協(xié)議，都基于 TCP 協(xié)議。但是 WebSocket 是一種雙向通信協(xié)議，在建立連接之后，WebSocket 的 server 與 client 都能主動(dòng)向?qū)Ψ桨l(fā)送或接收數(shù)據(jù)。同時(shí)，WebSocket 在建立連接時(shí)需要借助 HTTP 協(xié)議，連接建立好了之后 client 與 server 之間的雙向通信就與 HTTP 無關(guān)了。
原生WebSocket API使用起來不太方便，我們使用Socket.io，它很好地封裝了webSocket接口，提供了更簡(jiǎn)單、靈活的接口，也對(duì)不支持webSocket的瀏覽器提供了向下兼容。
處理跨域方法四——postMessage
如果兩個(gè)網(wǎng)頁不同源，就無法拿到對(duì)方的DOM。典型的例子是iframe窗口和window.open方法打開的窗口，它們與父窗口無法通信。HTML5為了解決這個(gè)問題，引入了一個(gè)全新的API：跨文檔通信 API（Cross-document messaging）。這個(gè)API為window對(duì)象新增了一個(gè)window.postMessage方法，允許跨窗口通信，不論這兩個(gè)窗口是否同源。postMessage方法的第一個(gè)參數(shù)是具體的信息內(nèi)容，第二個(gè)參數(shù)是接收消息的窗口的源（origin），即"協(xié)議 + 域名 + 端口"。也可以設(shè)為*，表示不限制域名，向所有窗口發(fā)送。
接下來我們看個(gè)例子：
近期文章：
等等，先別走！「碼個(gè)蛋」又有活動(dòng)了！參與活動(dòng)不但可以培養(yǎng)自己的好習(xí)慣，還能拿到「碼個(gè)蛋」IP系列專屬獎(jiǎng)品，速度要快...
今日問題：
你希望公眾號(hào)增加什么內(nèi)容呢，請(qǐng)大聲說出來？
留言格式：
打卡x 天，答：xxx。
告訴你一個(gè)小技巧：
只需3步，你將不會(huì)錯(cuò)過任何一篇文章！
后端數(shù)據(jù)交互經(jīng)常會(huì)碰到請(qǐng)求跨域，什么是跨域，以及有哪幾種跨域方式，這是本文要探討的內(nèi)容。
一、什么是跨域？
1.什么是同源策略及其限制內(nèi)容？
同源策略是一種約定，它是瀏覽器最核心也最基本的安全功能，如果缺少了同源策略，瀏覽器很容易受到 XSS、CSFR 等攻擊。所謂同源是指"協(xié)議+域名+端口"三者相同，即便兩個(gè)不同的域名指向同一個(gè) ip 地址，也非同源。
同源策略限制內(nèi)容有：
Cookie、LocalStorage、IndexedDB 等存儲(chǔ)性內(nèi)容
DOM 節(jié)點(diǎn)
AJAX 請(qǐng)求發(fā)送后，結(jié)果被瀏覽器攔截了
但是有三個(gè)標(biāo)簽是允許跨域加載資源：
<img src=XXX>
<link href=XXX>
<script src=XXX>
2.常見跨域場(chǎng)景
當(dāng)協(xié)議、子域名、主域名、端口號(hào)中任意一個(gè)不相同時(shí)，都算作不同域。不同域之間相互請(qǐng)求資源，就算作“跨域”。常見跨域場(chǎng)景如下圖所示：
特別說明兩點(diǎn)：
第一：如果是協(xié)議和端口造成的跨域問題“前臺(tái)”是無能為力的。
第二：在跨域問題上，僅僅是通過“URL 的首部”來識(shí)別而不會(huì)根據(jù)域名對(duì)應(yīng)的 IP 地址是否相同來判斷。“URL 的首部”可以理解為“協(xié)議, 域名和端口必須匹配”。
這里你或許有個(gè)疑問：請(qǐng)求跨域了，那么請(qǐng)求到底發(fā)出去沒有？
跨域并不是請(qǐng)求發(fā)不出去，請(qǐng)求能發(fā)出去，服務(wù)端能收到請(qǐng)求并正常返回結(jié)果，只是結(jié)果被瀏覽器攔截了。你可能會(huì)疑問明明通過表單的方式可以發(fā)起跨域請(qǐng)求，為什么 Ajax 就不會(huì)?因?yàn)闅w根結(jié)底，跨域是為了阻止用戶讀取到另一個(gè)域名下的內(nèi)容，Ajax 可以獲取響應(yīng)，瀏覽器認(rèn)為這不安全，所以攔截了響應(yīng)。但是表單并不會(huì)獲取新的內(nèi)容，所以可以發(fā)起跨域請(qǐng)求。同時(shí)也說明了跨域并不能完全阻止 CSRF，因?yàn)檎?qǐng)求畢竟是發(fā)出去了。
二、跨域解決方案
1.jsonp
1)JSONP 原理
利用 script 標(biāo)簽沒有跨域限制的漏洞，網(wǎng)頁可以得到從其他來源動(dòng)態(tài)產(chǎn)生的 JSON 數(shù)據(jù)。JSONP 請(qǐng)求一定需要對(duì)方的服務(wù)器做支持才可以。
2)JSONP 和 AJAX 對(duì)比
JSONP 和 AJAX 相同，都是客戶端向服務(wù)器端發(fā)送請(qǐng)求，從服務(wù)器端獲取數(shù)據(jù)的方式。但 AJAX 屬于同源策略，JSONP 屬于非同源策略（跨域請(qǐng)求）
3)JSONP 優(yōu)缺點(diǎn)
JSONP 優(yōu)點(diǎn)是簡(jiǎn)單兼容性好，可用于解決主流瀏覽器的跨域數(shù)據(jù)訪問的問題。缺點(diǎn)是僅支持 get 方法具有局限性,不安全可能會(huì)遭受 XSS 攻擊。
4)JSONP 的實(shí)現(xiàn)流程
聲明一個(gè)回調(diào)函數(shù)，其函數(shù)名(如 show)當(dāng)做參數(shù)值，要傳遞給跨域請(qǐng)求數(shù)據(jù)的服務(wù)器，函數(shù)形參為要獲取目標(biāo)數(shù)據(jù)(服務(wù)器返回的 data)。
創(chuàng)建一個(gè)script標(biāo)簽，把那個(gè)跨域的 API 數(shù)據(jù)接口地址，賦值給 script 的 src,還要在這個(gè)地址中向服務(wù)器傳遞該函數(shù)名（可以通過問號(hào)傳參:?callback=show）。
服務(wù)器接收到請(qǐng)求后，需要進(jìn)行特殊的處理：把傳遞進(jìn)來的函數(shù)名和它需要給你的數(shù)據(jù)拼接成一個(gè)字符串,例如：傳遞進(jìn)去的函數(shù)名是 show，它準(zhǔn)備好的數(shù)據(jù)是show('我不愛你')。
最后服務(wù)器把準(zhǔn)備的數(shù)據(jù)通過 HTTP 協(xié)議返回給客戶端，客戶端再調(diào)用執(zhí)行之前聲明的回調(diào)函數(shù)（show），對(duì)返回的數(shù)據(jù)進(jìn)行操作。
在開發(fā)中可能會(huì)遇到多個(gè) JSONP 請(qǐng)求的回調(diào)函數(shù)名是相同的，這時(shí)候就需要自己封裝一個(gè) JSONP 函數(shù)。
// index.html`
function` `jsonp({ url, params, callback }) {`
return` `new` `Promise((resolve, reject)={`
let script=document.createElement(``'script'``)`
window[callback]=` `function``(data) {`
resolve(data)`
document.body.removeChild(script)`
}`
params={ ...params, callback }` `// wd=b&callback=show`
let arrs=[]`
for` `(let key` `in` `params) {`
arrs.push(`${key}=${params[key]}`)`
}`
script.src=`${url}?${arrs.join(``'&'``)}``
document.body.appendChild(script)`
})`
}`
jsonp({`
url:` `'[http://localhost:3000/say](http://localhost:3000/say)'``,`
params: { wd:` `'Iloveyou'` `},`
callback:` `'show'`
}).then(data={`
console.log(data)`
})`
上面這段代碼相當(dāng)于向http://localhost:3000/say?wd=Iloveyou&callback=show這個(gè)地址請(qǐng)求數(shù)據(jù)，然后后臺(tái)返回show('我不愛你')，最后會(huì)運(yùn)行 show()這個(gè)函數(shù)，打印出'我不愛你'
// server.js
let express=require('express')
let app=express()
app.get('/say', function(req, res) {
let { wd, callback }=req.query
console.log(wd) // Iloveyou
console.log(callback) // show
res.end(`${callback}('我不愛你')`)
})
app.listen(3000)
5) jQuery 的 jsonp 形式
JSONP 都是 GET 和異步請(qǐng)求的，不存在其他的請(qǐng)求方式和同步請(qǐng)求，且 jQuery 默認(rèn)就會(huì)給 JSONP 的請(qǐng)求清除緩存。
$.ajax({`
url:``"[http://crossdomain.com/jsonServerResponse](http://crossdomain.com/jsonServerResponse)"``,`
dataType:``"jsonp"``,`
type:``"get"``,``//可以省略`
jsonpCallback:``"show"``,``//->自定義傳遞給服務(wù)器的函數(shù)名，而不是使用jQuery自動(dòng)生成的，可省略`
jsonp:``"callback"``,``//->把傳遞函數(shù)名的那個(gè)形參callback，可省略`
success:``function` `(data){`
console.log(data);}`
});`
2.cors
CORS 需要瀏覽器和后端同時(shí)支持。IE 8 和 9 需要通過 XDomainRequest 來實(shí)現(xiàn)。
瀏覽器會(huì)自動(dòng)進(jìn)行 CORS 通信，實(shí)現(xiàn) CORS 通信的關(guān)鍵是后端。只要后端實(shí)現(xiàn)了 CORS，就實(shí)現(xiàn)了跨域。
服務(wù)端設(shè)置 Access-Control-Allow-Origin 就可以開啟 CORS。 該屬性表示哪些域名可以訪問資源，如果設(shè)置通配符則表示所有網(wǎng)站都可以訪問資源。
雖然設(shè)置 CORS 和前端沒什么關(guān)系，但是通過這種方式解決跨域問題的話，會(huì)在發(fā)送請(qǐng)求時(shí)出現(xiàn)兩種情況，分別為簡(jiǎn)單請(qǐng)求和復(fù)雜請(qǐng)求。
1) 簡(jiǎn)單請(qǐng)求
只要同時(shí)滿足以下兩大條件，就屬于簡(jiǎn)單請(qǐng)求
條件 1：使用下列方法之一：
GET
HEAD
POST
條件 2：Content-Type 的值僅限于下列三者之一：
text/plain
multipart/form-data
application/x-www-form-urlencoded
請(qǐng)求中的任意 XMLHttpRequestUpload 對(duì)象均沒有注冊(cè)任何事件監(jiān)聽器； XMLHttpRequestUpload 對(duì)象可以使用 XMLHttpRequest.upload 屬性訪問。
2) 復(fù)雜請(qǐng)求
不符合以上條件的請(qǐng)求就肯定是復(fù)雜請(qǐng)求了。
復(fù)雜請(qǐng)求的 CORS 請(qǐng)求，會(huì)在正式通信之前，增加一次 HTTP 查詢請(qǐng)求，稱為"預(yù)檢"請(qǐng)求,該請(qǐng)求是 option 方法的，通過該請(qǐng)求來知道服務(wù)端是否允許跨域請(qǐng)求。
我們用PUT向后臺(tái)請(qǐng)求時(shí)，屬于復(fù)雜請(qǐng)求，后臺(tái)需做如下配置：
// 允許哪個(gè)方法訪問我
res.setHeader('Access-Control-Allow-Methods', 'PUT')
// 預(yù)檢的存活時(shí)間
res.setHeader('Access-Control-Max-Age', 6)
// OPTIONS請(qǐng)求不做任何處理
if (req.method==='OPTIONS') {
res.end()
}
// 定義后臺(tái)返回的內(nèi)容
app.put('/getData', function(req, res) {
console.log(req.headers)
res.end('我不愛你')
})
接下來我們看下一個(gè)完整復(fù)雜請(qǐng)求的例子，并且介紹下 CORS 請(qǐng)求相關(guān)的字段
// index.html`
let xhr=` `new` `XMLHttpRequest()`
document.cookie=` `'name=xiamen'` `// cookie不能跨域`
xhr.withCredentials=` `true` `// 前端設(shè)置是否帶cookie`
xhr.open(``'PUT'``,` `'[http://localhost:4000/getData](http://localhost:4000/getData)'``,` `true``)`
xhr.setRequestHeader(``'name'``,` `'xiamen'``)`
xhr.onreadystatechange=` `function``() {`
if` `(xhr.readyState===4) {`
if` `((xhr.status >=200 && xhr.status < 300) || xhr.status===304) {`
console.log(xhr.response)`
//得到響應(yīng)頭，后臺(tái)需設(shè)置Access-Control-Expose-Headers`
console.log(xhr.getResponseHeader(``'name'``))`
}`
}`
}`
xhr.send()`
//server1.js
let express=require('express');
let app=express();
app.use(express.static(__dirname));
app.listen(3000);
//server2.js`
let express=require(``'express'``)`
let app=express()`
let whitList=[``'[http://localhost:3000](http://localhost:3000/)'``] //設(shè)置白名單`
app.use(``function``(req, res, next) {`
let origin=req.headers.origin`
if` `(whitList.includes(origin)) {`
// 設(shè)置哪個(gè)源可以訪問我`
res.setHeader(``'Access-Control-Allow-Origin'``, origin)`
// 允許攜帶哪個(gè)頭訪問我`
res.setHeader(``'Access-Control-Allow-Headers'``,` `'name'``)`
// 允許哪個(gè)方法訪問我`
res.setHeader(``'Access-Control-Allow-Methods'``,` `'PUT'``)`
// 允許攜帶cookie`
res.setHeader(``'Access-Control-Allow-Credentials'``,` `true``)`
// 預(yù)檢的存活時(shí)間`
res.setHeader(``'Access-Control-Max-Age'``, 6)`
// 允許返回的頭`
res.setHeader(``'Access-Control-Expose-Headers'``,` `'name'``)`
if` `(req.method===` `'OPTIONS'``) {`
res.end()` `// OPTIONS請(qǐng)求不做任何處理`
}`
}`
next()`
})`
app.put(``'/getData'``,` `function``(req, res) {`
console.log(req.headers)`
res.setHeader(``'name'``,` `'jw'``)` `//返回一個(gè)響應(yīng)頭，后臺(tái)需設(shè)置`
res.end(``'我
app.get(``'/getData'``,` `function``(req, res) {`
console.log(req.headers)`
res.end(``'我不愛你'``)`
})`
app.use(express.static(__dirname))`
app.listen(4000)`
不愛你'``)`
})`
上述代碼由http://localhost:3000/index.html向http://localhost:4000/跨域請(qǐng)求，正如我們上面所說的，后端是實(shí)現(xiàn) CORS 通信的關(guān)鍵。
3.postMessage
postMessage 是 HTML5 XMLHttpRequest Level 2 中的 API，且是為數(shù)不多可以跨域操作的 window 屬性之一，它可用于解決以下方面的問題：
頁面和其打開的新窗口的數(shù)據(jù)傳遞
多窗口之間消息傳遞
頁面與嵌套的 iframe 消息傳遞
上面三個(gè)場(chǎng)景的跨域數(shù)據(jù)傳遞
postMessage()方法允許來自不同源的腳本采用異步方式進(jìn)行有限的通信，可以實(shí)現(xiàn)跨文本檔、多窗口、跨域消息傳遞。
otherWindow.postMessage(message, targetOrigin, [transfer]);
message: 將要發(fā)送到其他 window 的數(shù)據(jù)。
targetOrigin:通過窗口的 origin 屬性來指定哪些窗口能接收到消息事件，其值可以是字符串"*"（表示無限制）或者一個(gè) URI。在發(fā)送消息的時(shí)候，如果目標(biāo)窗口的協(xié)議、主機(jī)地址或端口這三者的任意一項(xiàng)不匹配 targetOrigin 提供的值，那么消息就不會(huì)被發(fā)送；只有三者完全匹配，消息才會(huì)被發(fā)送。
transfer(可選)：是一串和 message 同時(shí)傳遞的 Transferable 對(duì)象. 這些對(duì)象的所有權(quán)將被轉(zhuǎn)移給消息的接收方，而發(fā)送一方將不再保有所有權(quán)。
接下來我們看個(gè)例子： http://localhost:3000/a.html頁面向http://localhost:4000/b.html傳遞“我愛你”,然后后者傳回"我不愛你"。
// a.html`
<``iframe` `src``=``"[http://localhost:4000/b.html](http://localhost:4000/b.html)"` `frameborder``=``"0"`
id``=``"frame"` `onload``=``"load()"``></``iframe``//等它加載完觸發(fā)一個(gè)事件`
//內(nèi)嵌在[http://localhost:3000/a.html](http://localhost:3000/a.html)`
<script>`
function load() {`
let frame=document.getElementById('frame')`
frame.contentWindow.postMessage('我愛你', '[http://localhost:4000](http://localhost:4000/)') //發(fā)送數(shù)據(jù)`
window.onmessage=function(e) { //接受返回?cái)?shù)據(jù)`
console.log(e.data) //我不愛你`
}`
}`
</``script``>`
// b.html
window.onmessage=function(e) {
console.log(e.data) //我愛你
e.source.postMessage('我不愛你', e.origin)
}
4.websocket
Websocket 是 HTML5 的一個(gè)持久化的協(xié)議，它實(shí)現(xiàn)了瀏覽器與服務(wù)器的全雙工通信，同時(shí)也是跨域的一種解決方案。WebSocket 和 HTTP 都是應(yīng)用層協(xié)議，都基于 TCP 協(xié)議。但是 WebSocket 是一種雙向通信協(xié)議，在建立連接之后，WebSocket 的 server 與 client 都能主動(dòng)向?qū)Ψ桨l(fā)送或接收數(shù)據(jù)。同時(shí)，WebSocket 在建立連接時(shí)需要借助 HTTP 協(xié)議，連接建立好了之后 client 與 server 之間的雙向通信就與 HTTP 無關(guān)了。
原生 WebSocket API 使用起來不太方便，我們使用Socket.io，它很好地封裝了 webSocket 接口，提供了更簡(jiǎn)單、靈活的接口，也對(duì)不支持 webSocket 的瀏覽器提供了向下兼容。
我們先來看個(gè)例子：本地文件 socket.html 向localhost:3000發(fā)生數(shù)據(jù)和接受數(shù)據(jù)
// socket.html`
<``script``>`
let socket=new WebSocket('[ws://localhost:3000](ws://localhost:3000/)');`
socket.onopen=function () {`
socket.send('我愛你');//向服務(wù)器發(fā)送數(shù)據(jù)`
}`
socket.onmessage=function (e) {`
console.log(e.data);//接收服務(wù)器返回的數(shù)據(jù)`
}`
</``script``>`
// server.js
let express=require('express');
let app=express();
歡迎加入全棧開發(fā)交流劃水交流圈：582735936
面向劃水1-3年前端人員
幫助突破劃水瓶頸，提升思維能力
let WebSocket=require('ws');//記得安裝ws
let wss=new WebSocket.Server({port:3000});
wss.on('connection',function(ws) {
ws.on('message', function (data) {
console.log(data);
ws.send('我不愛你')
});
})
實(shí)現(xiàn)原理：同源策略是瀏覽器需要遵循的標(biāo)準(zhǔn)，而如果是服務(wù)器向服務(wù)器請(qǐng)求就無需遵循同源策略。
代理服務(wù)器，需要做以下幾個(gè)步驟：
接受客戶端請(qǐng)求 。
將請(qǐng)求 轉(zhuǎn)發(fā)給服務(wù)器。
拿到服務(wù)器 響應(yīng) 數(shù)據(jù)。
將 響應(yīng) 轉(zhuǎn)發(fā)給客戶端。
我們先來看個(gè)例子：本地文件 index.html 文件，通過代理服務(wù)器http://localhost:3000向目標(biāo)服務(wù)器http://localhost:4000請(qǐng)求數(shù)據(jù)。
// index.html([http://127.0.0.1:5500](http://127.0.0.1:5500/))`
<``script` `src``=``"[https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js](https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js)"``></``script``>`
<``script``>`
$.ajax({`
url: '[http://localhost:3000](http://localhost:3000/)',`
type: 'post',`
data: { name: 'xiamen', password: '123456' },`
contentType: 'application/json;charset=utf-8',`
success: function(result) {`
console.log(result) // {"title":"fontend","password":"123456"}`
},`
error: function(msg) {`
console.log(msg)`
}`
})`
</``script``>`
// server1.js 代理服務(wù)器([http://localhost:3000](http://localhost:3000/))`
const http=require(``'http'``)`
// 第一步：接受客戶端請(qǐng)求`
const server=http.createServer((request, response)={`
// 代理服務(wù)器，直接和瀏覽器直接交互，需要設(shè)置CORS 的首部字段`
response.writeHead(200, {`
'Access-Control-Allow-Origin'``:` `'*'``,`
'Access-Control-Allow-Methods'``:` `'*'``,`
'Access-Control-Allow-Headers'``:` `'Content-Type'`
})`
// 第二步：將請(qǐng)求轉(zhuǎn)發(fā)給服務(wù)器`
const proxyRequest=http`
.request(`
{`
host:` `'127.0.0.1'``,`
port: 4000,`
url:` `'/'``,`
method: request.method,`
headers: request.headers`
},`
serverResponse={`
// 第三步：收到服務(wù)器的響應(yīng)`
var` `body=` `''`
serverResponse.on(``'data'``, chunk={`
body +=chunk`
})`
serverResponse.on(``'end'``, ()={`
console.log(``'The data is '` `+ body)`
// 第四步：將響應(yīng)結(jié)果轉(zhuǎn)發(fā)給瀏覽器`
response.end(body)`
})`
}`
)`
.end()`
})`
server.listen(3000, ()={`
console.log(``'The proxyServer is running at [http://localhost:3000](http://localhost:3000/)'``)`
})`
// server2.js([http://localhost:4000](http://localhost:4000/))`
const http=require(``'http'``)`
const data={ title:` `'fontend'``, password:` `'123456'` `}`
const server=http.createServer((request, response)={`
if` `(request.url===` `'/'``) {`
response.end(JSON.stringify(data))`
}`
})`
server.listen(4000, ()={`
console.log(``'The server is running at [http://localhost:4000](http://localhost:4000/)'``)`
})`
6.nginx 反向代理
實(shí)現(xiàn)原理類似于 Node 中間件代理，需要你搭建一個(gè)中轉(zhuǎn) nginx 服務(wù)器，用于轉(zhuǎn)發(fā)請(qǐng)求。
使用 nginx 反向代理實(shí)現(xiàn)跨域，是最簡(jiǎn)單的跨域方式。只需要修改 nginx 的配置即可解決跨域問題，支持所有瀏覽器，支持 session，不需要修改任何代碼，并且不會(huì)影響服務(wù)器性能。
實(shí)現(xiàn)思路：通過 nginx 配置一個(gè)代理服務(wù)器（域名與 domain1 相同，端口不同）做跳板機(jī)，反向代理訪問 domain2 接口，并且可以順便修改 cookie 中 domain 信息，方便當(dāng)前域 cookie 寫入，實(shí)現(xiàn)跨域登錄。
先下載nginx，然后將 nginx 目錄下的 nginx.conf 修改如下:
// proxy服務(wù)器
server {
listen 80;
server_name www.domain1.com;
location / {
proxy_pass http://www.domain2.com:8080; #反向代理
proxy_cookie_domain www.domain2.com www.domain1.com; #修改cookie里域名
index index.html index.htm;
# 當(dāng)用webpack-dev-server等中間件代理接口訪問nignx時(shí)，此時(shí)無瀏覽器參與，故沒有同源限制，下面的跨域配置可不啟用
add_header Access-Control-Allow-Origin http://www.domain1.com; #當(dāng)前端只跨域不帶cookie時(shí)，可為*
add_header Access-Control-Allow-Credentials true;
}
}
最后通過命令行nginx -s reload啟動(dòng) nginx
// index.html`
var xhr=new XMLHttpRequest();`
// 前端開關(guān)：瀏覽器是否讀寫cookie`
xhr.withCredentials=true;`
// 訪問nginx中的代理服務(wù)器`
xhr.open('get', '[http://www.domain1.com:81/?user=admin](http://www.domain1.com:81/?user=admin)', true);`
xhr.send();`
// server.js
var http=require('http');
var server=http.createServer();
var qs=require('querystring');
server.on('request', function(req, res) {
var params=qs.parse(req.url.substring(2));
// 向前臺(tái)寫cookie
res.writeHead(200, {
'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly' // HttpOnly:腳本無法讀取
});
res.write(JSON.stringify(params));
res.end();
});
server.listen('8080');
console.log('Server is running at port 8080...');
7.window.name + iframe
window.name 屬性的獨(dú)特之處：name 值在不同的頁面（甚至不同域名）加載后依舊存在，并且可以支持非常長的 name 值（2MB）。
其中 a.html 和 b.html 是同域的，都是http://localhost:3000;而 c.html 是http://localhost:4000
// a.html([http://localhost:3000/b.html](http://localhost:3000/b.html))`
<``iframe` `src``=``"[http://localhost:4000/c.html](http://localhost:4000/c.html)"` `frameborder``=``"0"` onload``=``"load()"` `id``=``"iframe"``></``iframe``>`
<``script``>`
let first=true`
// onload事件會(huì)觸發(fā)2次，第1次加載跨域頁，并留存數(shù)據(jù)于window.name`
function load() {`
if(first){`
// 第1次onload(跨域頁)成功后，切換到同域代理頁面`
let iframe=document.getElementById('iframe');`
iframe.src='[http://localhost:3000/b.html](http://localhost:3000/b.html)';`
first=false;`
}else{`
// 第2次onload(同域b.html頁)成功后，讀取同域window.name中數(shù)據(jù)`
console.log(iframe.contentWindow.name);`
}`
歡迎加入全棧開發(fā)交流劃水交流圈：582735936
面向劃水1-3年前端人員
幫助突破劃水瓶頸，提升思維能力
}`
</``script``>`
b.html 為中間代理頁，與 a.html 同域，內(nèi)容為空。
// c.html([http://localhost:4000/c.html](http://localhost:4000/c.html))` <``script``>` window.name='我不愛你'` </``script``>`
總結(jié)：通過 iframe 的 src 屬性由外域轉(zhuǎn)向本地域，跨域數(shù)據(jù)即由 iframe 的 window.name 從外域傳遞到本地域。這個(gè)就巧妙地繞過了瀏覽器的跨域訪問限制，但同時(shí)它又是安全操作。
8.location.hash + iframe
實(shí)現(xiàn)原理： a.html 欲與 c.html 跨域相互通信，通過中間頁 b.html 來實(shí)現(xiàn)。 三個(gè)頁面，不同域之間利用 iframe 的 location.hash 傳值，相同域之間直接 js 訪問來通信。
具體實(shí)現(xiàn)步驟：一開始 a.html 給 c.html 傳一個(gè) hash 值，然后 c.html 收到 hash 值后，再把 hash 值傳遞給 b.html，最后 b.html 將結(jié)果放到 a.html 的 hash 值中。
同樣的，a.html 和 b.html 是同域的，都是http://localhost:3000;而 c.html 是http://localhost:4000
// a.html`
<``iframe` `src``=``"[http://localhost:4000/c.html](http://localhost:4000/c.html)#iloveyou"``></``iframe``>`
<``script``>`
window.onhashchange=function () { //檢測(cè)hash的變化`
console.log(location.hash);`
}`
</``script``>`
// b.html`
<``script``>
window.parent.parent.location.hash=location.hash`
//b.html將結(jié)果放到a.html的hash值中，b.html可通過parent.parent訪問a.html頁面`
</``script``>`
// c.html`
console.log(location.hash);`
let iframe=document.createElement('iframe');`
iframe.src='[http://localhost:3000/b.html](http://localhost:3000/b.html)#idontloveyou';`
document.body.appendChild(iframe);`
9.document.domain + iframe`
該方式只能用于二級(jí)域名相同的情況下，比如 a.test.com 和 b.test.com 適用于該方式。
只需要給頁面添加 document.domain='test.com' 表示二級(jí)域名都相同就可以實(shí)現(xiàn)跨域。
實(shí)現(xiàn)原理：兩個(gè)頁面都通過 js 強(qiáng)制設(shè)置 document.domain 為基礎(chǔ)主域，就實(shí)現(xiàn)了同域。
我們看個(gè)例子：頁面a.zf1.cn:3000/a.html獲取頁面b.zf1.cn:3000/b.html中 a 的值
// a.html`
<``body``>`
helloa`
<``iframe` `src``=``"[http://b.zf1.cn:3000/b.html](http://b.zf1.cn:3000/b.html)"` frameborder``=``"0"`onload``=``"load()"` `id``=``"frame"``></``iframe``>`
<``script``>`
document.domain='zf1.cn'`
function load() {`
}`
歡迎加入全棧開發(fā)交流劃水交流圈：582735936
面向劃水1-3年前端人員
幫助突破劃水瓶頸，提升思維能力
</``script``>`
</``body``>`
// b.html
<body>
hellob
<script>
document.domain='zf1.cn'
var a=100;
</script>
</body>
三、總結(jié)
CORS 支持所有類型的 HTTP 請(qǐng)求，是跨域 HTTP 請(qǐng)求的根本解決方案
JSONP 只支持 GET 請(qǐng)求，JSONP 的優(yōu)勢(shì)在于支持老式瀏覽器，以及可以向不支持 CORS 的網(wǎng)站請(qǐng)求數(shù)據(jù)。
不管是 Node 中間件代理還是 nginx 反向代理，主要是通過同源策略對(duì)服務(wù)器不加限制。
日常工作中，用得比較多的跨域方案是 cors 和 nginx 反向代理
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
