ajax跨域通路方案分為jsonp和cors,本文将會對兩種方案進行介紹。
jsonp
jsonp的原理是利用html文檔script标簽可以跨域通路的特點,通過在html文檔中動态添加script标簽,從其它域擷取資料并在原html文檔中回調處理資料。下面利用jquery封裝好的jsonp,跨域擷取資料。
清單:www.a.com的html文檔
代碼中,采用ajax jsonp的方式請求www.b.com域名擷取資料,并顯示在頁面中。 jsonp預設采取get方式請求資料。
清單:www.b.com的api
jsonp的傳回資料的格式是 callback_method(json_data) ,這裡的callback_method對應于原html文檔中存在的一個函數的函數名。
缺點: jsonp采用的是get方法請求資料,當資料量很大的時候,不能解決跨域請求資料的問題。
cors
cors,全稱跨域資源共享(cross-origin resource sharing)。cors 是一種網絡浏覽器的技術規範,它為web伺服器定義了一種方式,允許網頁從不同的域通路其資源。
既然cors是一種規範,那麼必須需要浏覽器實作這種規範,這就不可避免出現浏覽器相容的問題。我們看一下各浏覽器對cors的支援

cors請求又分為簡單請求和非簡單請求。簡單請求是指通過get方式擷取資源;非簡單請求是指 如post、put、delete類型請求,或者在請求中有其它自定義的http header。下面詳細介紹一下對于不同的請求的實作方法。
簡單請求
response中需要添加access-control-allow-origin頭,告訴浏覽器哪些域名的網站可以擷取傳回的資料
清單:www.a.com的html文檔擷取www.b.com的資料
清單:www.b.com通過cors方式傳回資料給www.a.com
非簡單請求
對于非簡單請求,會執行一次preflight操作,浏覽器會發起一次options類型請求,要對options請求給予正确應答,應答内容是允許誰通路,允許什麼方法,允許什麼自定義頭的request。下面看一下一次request請求的cors流程。
打開調試模式後,可以看到一次request請求被分成了兩次:
第一個請求是用options方法。 //這裡所做是的是預檢查,從伺服器确認是否可以繼續
第二個請求才是你發起的請求方法。
清單:www.a.com的html文檔,對www.b.com發起ajax請求資料,并攜帶了自定義 header和采用post方法
清單:www.b.com的api在option的進行中,對response添加了一些頭。
大家可以看到利用cors方案處理ajax跨域請求的問題,但是比較麻煩的是需要修改java代碼,侵入性很強。為了解決這個問題,我們可以在nginx中配置,讓response傳回的時候自動添加傳回頭。
niginx的配置如下:
<a href="https://my.oschina.net/thinwonton/blog/1055826">原文連結</a>