同源策略
- 所謂同源(即指在同一個(gè)域)就是兩個(gè)頁(yè)面具有相同的協(xié)議(protocol)缓待,主機(jī)(host)端口號(hào)(port)
- 同源策略是瀏覽器的一個(gè)安全功能舌界,不同源的客戶端腳本在沒(méi)有明確授權(quán)的情況下答毫,不能讀寫對(duì)方資源仪搔。 同源策略是瀏覽器安全的基石
- 同源策略會(huì)阻止一個(gè)域的 javascript 腳本和另外一個(gè)域的內(nèi)容進(jìn)行交互屠升。例如辦公內(nèi)外網(wǎng)環(huán)境,當(dāng)我們?cè)L問(wèn)外網(wǎng)一個(gè)惡意網(wǎng)站的時(shí)候誉尖,惡意網(wǎng)站就會(huì)利用我們的主機(jī)向內(nèi)網(wǎng)的 url 發(fā)送 ajax 請(qǐng)求罪既,破壞或盜取數(shù)據(jù)
瀏覽器的非同源限制
- 無(wú)法讀取非同源網(wǎng)頁(yè)的 Cookie、LocalStorage 和 IndexedDB
- 無(wú)法接觸非同源網(wǎng)頁(yè)的 DOM和js對(duì)象
- 無(wú)法向非同源地址發(fā)送 AJAX 請(qǐng)求铡恕,即 XHR 請(qǐng)求
解決跨域的方案
1琢感、通過(guò)jsonp跨域
2、 document.domain + iframe跨域
3没咙、 location.hash + iframe
4猩谊、 window.name + iframe跨域
5、 postMessage跨域
6祭刚、 跨域資源共享(CORS)
7、 nginx代理跨域
8、 nodejs中間件代理跨域
9涡驮、 WebSocket協(xié)議跨域
vue實(shí)現(xiàn)跨域
配置proxyTable下面的參數(shù)就可以實(shí)現(xiàn)暗甥。
原理:跨域是瀏覽器禁止的,服務(wù)器并不禁止捉捅,使用proxyTable的原理就是將域名發(fā)送給本地的服務(wù)器撤防,再由本地的服務(wù)器去請(qǐng)求真正的服務(wù)器。
實(shí)現(xiàn)跨域的方法
- 關(guān)閉瀏覽器的安全策略棒口,實(shí)現(xiàn)跨域,以谷歌舉例:
// windows中新建一個(gè)bat文件粘貼下面的命令即可以此模式打開(kāi)
cd "C:\Program Files (x86)\Google\Chrome\Application"
chrome.exe --disable-web-security --user-data-dir=c:/CorsUserData
- 服務(wù)端的CORS跨域設(shè)置和JSONP
JSONP只支持GET請(qǐng)求寄月,CORS支持所有類型的HTTP請(qǐng)求。JSONP的優(yōu)勢(shì)在于支持老式瀏覽器无牵,以及可以向不支持CORS的網(wǎng)站請(qǐng)求數(shù)據(jù)漾肮。
參考網(wǎng)站:1. https://www.cnblogs.com/n031/p/11828797.html