可能是最好的跨域解決方案 ！
點(diǎn)擊關(guān)注公眾號(hào)，Java干貨及時(shí)送達(dá)??
作者 | campcc
來源 | https://github.com/campcc/blog
今天我們來聊一個(gè)老生常談的話題，跨域！又是跨域，煩不煩 ？網(wǎng)上跨域的文章那么多，跨的我眼睛都疲勞了，不看了不看了 ?? 別走...我盡量用最簡(jiǎn)單的方式將常見的幾種跨域解決方案給大家闡釋清楚，相信認(rèn)真看完本文，以后不管是作為受試者還是面試官，對(duì)于這塊的知識(shí)都能夠游刃有余。
什么是“跨源”
**不是講跨域嗎 ？怎么又來個(gè)“跨源” ？字都能打錯(cuò)的 ？*??...稍安勿躁，其實(shí)我們平常說的跨域是一種狹義的請(qǐng)求場(chǎng)景，簡(jiǎn)單來說，就是“跨“過*瀏覽器的同源策略[1]去請(qǐng)求資“源”，所以我們叫它“跨源”也沒啥問題。那么，跨源，源是什么？瀏覽器的同源策略什么是同源？協(xié)議，域名，端口都相同就是同源干巴巴的，能不能舉個(gè)栗子？栗子:)，有的有的：
const?url?=?'https://www.google.com:3000'
比如上面的這個(gè) URL，協(xié)議是：https，域名是 www.google.com，端口是[2] 3000。不同源了會(huì)怎么樣？會(huì)有很多限制，比如：
Cookie，LocalStorage，IndexDB 等存儲(chǔ)性內(nèi)容無法讀取 DOM 節(jié)點(diǎn)無法訪問 Ajax 請(qǐng)求發(fā)出去了，但是響應(yīng)被瀏覽器攔截了
我就想請(qǐng)求個(gè)東西，至于嗎，為什么要搞個(gè)這么個(gè)東西限制我？基于安全考慮，沒有它，你可能會(huì)遇到：
Cookie劫持，被惡意網(wǎng)站竊取數(shù)據(jù) 更容易受到 XSS，CSRF 攻擊 無法隔離潛在惡意文件 ... ...
所以，得有。正是因?yàn)闉g覽器同源策略的存在，你的 Ajax 請(qǐng)求有可能在發(fā)出去后就被攔截了，它還會(huì)給你報(bào)個(gè)錯(cuò)：
??Access?to?XMLHttpRequest?at?'xxx'?from?origin?'xxx'?has?been?block?by?CORS,
??policy:?No?'Access-Control-Allow-Origin'?header?is?present?on?the?requested?resource.
這種發(fā)出去拿不到響應(yīng)的感受，就像你在網(wǎng)上沖浪時(shí)，被一股神秘的東方力量限制了一樣:
非常難受，所以，我們接下來就來看看怎么用科學(xué)的方法上網(wǎng)（啊呸，科學(xué)的方法解決跨域的問題）。
JSONP
這玩意兒就是利用了 `` 標(biāo)簽的 src 屬性沒有跨域限制的漏洞，讓我們可以得到從其他來源動(dòng)態(tài)產(chǎn)生的 JSON 數(shù)據(jù)。為什么叫 JSONP ？JSONP 是 JSON with Padding 的縮寫，額，至于為什么叫這個(gè)名字，我網(wǎng)上找了下也沒個(gè)標(biāo)準(zhǔn)的解釋，還望評(píng)論區(qū)的各位老哥知道的趕緊告訴我: ) 怎么實(shí)現(xiàn) ？具體實(shí)現(xiàn)思路大致分為以下步驟：
本站的腳本創(chuàng)建一個(gè) 元素，src 地址指向跨域請(qǐng)求數(shù)據(jù)的服務(wù)器 提供一個(gè)回調(diào)函數(shù)來接受數(shù)據(jù)，函數(shù)名可以通過地址參數(shù)傳遞進(jìn)行約定 服務(wù)器收到請(qǐng)求后，返回一個(gè)包裝了 JSON 數(shù)據(jù)的響應(yīng)字符串，類似這樣：callback({...})
瀏覽器接受響應(yīng)后就會(huì)去執(zhí)行回調(diào)函數(shù) callback，傳遞解析后的 JSON 對(duì)象作為參數(shù)，這樣我們就可以在 callback 里處理數(shù)據(jù)了。實(shí)際開發(fā)中，會(huì)遇到回調(diào)函數(shù)名相同的情況，可以簡(jiǎn)單封裝一個(gè) JSONP 函數(shù)：
function?jsonp({?url,?params,?callback?})?{
??return?new?Promise((resolve,?reject)?=>?{
????//?創(chuàng)建一個(gè)臨時(shí)的?script?標(biāo)簽用于發(fā)起請(qǐng)求
????const?script?=?document.createElement('script');
????//?將回調(diào)函數(shù)臨時(shí)綁定到?window?對(duì)象，回調(diào)函數(shù)執(zhí)行完成后，移除?script?標(biāo)簽
????window[callback]?=?data?=>?{
??????resolve(data);
??????document.body.removeChild(script);
????};
????//?構(gòu)造?GET?請(qǐng)求參數(shù)，key=value&callback=callback
????const?formatParams?=?{?...params,?callback?};
????const?requestParams?=?Object.keys(formatParams)
??????.reduce((acc,?cur)?=>?{
????????return?acc.concat([`${cur}=${formatParams[cur]}`]);
??????},?[])
???.join('&');
?//?構(gòu)造?GET?請(qǐng)求的?url?地址
????const?src?=?`${url}?${requestParams}`;
????script.setAttribute('src',?src);
????document.body.appendChild(script);
??});
}
//?調(diào)用時(shí)
jsonp({
??url:?'https://xxx.xxx',
??params:?{...},
??callback:?'func',
})
我們用 Promise 封裝了請(qǐng)求，使異步回調(diào)更加優(yōu)雅，但是別看樓上的洋洋灑灑寫了一大段，其實(shí)本質(zhì)上就是：
<kbd id="afajh"><form id="afajh"></form></kbd> <strong id="afajh"><dl id="afajh"></dl></strong>
<del id="afajh"><form id="afajh"></form></del>
<th id="afajh"><progress id="afajh"></progress></th>
<b id="afajh"><abbr id="afajh"></abbr></b>
<th id="afajh"><progress id="afajh"></progress></th>