沒有純前端的跨域解決方案,遇到跨域,請找后端協商方案!
什么是跨域?
同源策略限制從一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用于隔離潛在惡意文件的關鍵的安全機制。 ——MDN
跨域的產生來源于瀏覽器的同源策略。當你訪問(請求)的資源和當前頁的協議、域名、端口中有一個不同時,就會遇到跨域問題。
常見的解決方案有以下3種。
1. jsonp
jsonp 和 XMLHttpRequest 完全沒有關系。
html中的某些標簽具有訪問跨域資源的特性。例如,我們通過使用 script
標簽向其他服務器請求數據,這種技術我們稱為jsonp。
具體行為:創建一個 script
標簽,給 src
賦值請求的url,并添加到 document
中去,然后瀏覽器就會發送一個 GET
的 HTTP 請求以下載 src
屬性所指向的 URL 。
示意圖:
具體代碼就不貼了,如果請求超時了,會觸發 script
標簽的 onerror
事件,類似
a = new Image();
a.src = "http://www.baidu.com";
a.onerror = function(){
console.log('load failed')
}
圖片資源請求失敗會觸發它的 onerror
事件。
2. cors 跨域資源共享
這是后端來處理的,前端不需要了解太多。主要是通過設置 responseHeader
的 Access-Control-Allow-Origin
字段
這里可以參考 "跨域資源共享 CORS 詳解——阮一峰" 。 里面講的蠻好的, 包括什么是簡單請求,什么是非簡單請求,什么情況下,瀏覽器會先嘗試發起 options
請求。
示意圖:
3. 代理
我這里說的代理是指 中間層代理 和 nginx反向代理。
在我的理解里, 這兩個東西其實差不多,因為是服務端來處理,而服務端是沒有跨域問題的。
舉個例子,我用一個node服務來做中間轉發層。我在 www.ccc.com/a.html
中向同源的 www.ccc.com/api/v1/getUserAge?id=106
發起請求,node服務接收到這個請求后,在node服務端向另外一個服務器比如 www.aaa.com/api/v1/getUserAge?id=106
發起請求,等它返回結果后,再將請求結果返回給 www.ccc.com/a.html
。
示意圖:
nginx 我沒怎么用過,但應該也差不多,有個對外和對內的請求的攔截器之類的東西,在里面設置轉發。
就寫到這里,如果有那里理解的不對,還請指正,謝謝?? : )