用最簡(jiǎn)單的方式講清楚常見的幾種跨域解決方案
大廠技術(shù)??高級(jí)前端??Node進(jìn)階
點(diǎn)擊上方?程序員成長(zhǎng)指北，關(guān)注公眾號(hào)
回復(fù)1，加入高級(jí)Node交流群
今天我們來(lái)聊一個(gè)老生常談的話題，跨域！又是跨域，煩不煩 ？網(wǎng)上跨域的文章那么多，跨的我眼睛都疲勞了，不看了不看了??? 別走...我盡量用最簡(jiǎn)單的方式將常見的幾種跨域解決方案給大家闡釋清楚，相信認(rèn)真看完本文，以后不管是作為受試者還是面試官，對(duì)于這塊的知識(shí)都能夠游刃有余。
什么是“跨源”
**不是講跨域嗎 ？怎么又來(lái)個(gè)“跨源” ？字都能打錯(cuò)的 ？**??...稍安勿躁，其實(shí)我們平常說的跨域是一種狹義的請(qǐng)求場(chǎng)景，簡(jiǎn)單來(lái)說，就是“跨“過瀏覽器的同源策略[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)容無(wú)法讀取 DOM 節(jié)點(diǎn)無(wú)法訪問 Ajax 請(qǐng)求發(fā)出去了，但是響應(yīng)被瀏覽器攔截了
我就想請(qǐng)求個(gè)東西，至于嗎，為什么要搞個(gè)這么個(gè)東西限制我？基于安全考慮，沒有它，你可能會(huì)遇到：
Cookie劫持，被惡意網(wǎng)站竊取數(shù)據(jù) 更容易受到 XSS，CSRF 攻擊 無(wú)法隔離潛在惡意文件 ... ...
所以，得有。正是因?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í)，被一股神秘的東方力量限制了一樣:?
非常難受，所以，我們接下來(lái)就來(lái)看看怎么用科學(xué)的方法上網(wǎng)（啊呸，科學(xué)的方法解決跨域的問題）。
JSONP
這玩意兒就是利用了?