跨域訪問

簡介

瀏覽器出於安全和隱私的緣由，對於XMLHttpRequest請求，禁止不一樣域名，不一樣端口，不一樣協議間的腳本相互影響，跨域腳本無效。如上圖（摘自參考1）用戶在瀏覽器瀏覽網站，若是javascript腳本請求了yahoo的接口或者文件，會報相似下圖這樣的錯誤。

同源策略：相同域名，相同端口，協議相同。三者有一個不知足，對於XMLHttpRequest來講，就存在跨域問題。

剖析

參考4，深度好文。慕課也有一篇翻譯的，建議對比着看。

解決方式

1.使用web代理的方式處理（詳情見參考1）。這也是通用處理方式。（能夠配置NGINX服務、或者代碼層次上請求）

大體的作法就是在web後端向第三方網站發送http請求，而後「包裝」一下，供前端調用。

2.Cross-Origin Resource Sharing(CORS)

經過添加一些特殊的請求頭、響應頭，使web進行跨域通訊

詳情能夠參考5

Access-Control-Allow-Origin: * 
Access-Control-Allow-Credentials: true 
Access-Control-Expose-Headers: FooBar

3.jsonp（JSON with Padding）

原理：一種非官方跨域數據交互協議，Web頁面上調用js文件時則不受是否跨域的影響（不只如此，凡是擁有」src」這個屬性的標籤都擁有跨域的能力，好比<script>、<img>、<iframe>。

說明：ajax和jsonp的原理不同！jsonp說白了就是後端動態生成數據（能夠是json，也能夠不是，可是javascript必定要可以解析），前端經過<scirpt>（也能夠是<iframe>或者其餘支持跨域的標籤）標籤請求該數據，從而突破瀏覽器的同源策略的限制。

4.。。。能夠參考6

總結

第一種和第二種爲主流方式，也是我的使用最多的。。（不清楚其餘人。）

號外

偶然發現慕課上有一個課程（參考7），我的還沒看，有空瞄一眼~

參考

1. https://developer.yahoo.com/javascript/howto-proxy.html
2. http://www.javashuo.com/article/p-bbnotdik-ep.html
3. https://html.spec.whatwg.org/#crossDocumentMessages
4. https://www.html5rocks.com/en/tutorials/cors/
5. https://mubu.com/doc/1Mdo8geHR8
6. http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html
7. https://www.imooc.com/note/947