ajax 跨域請求

 

jQuery中ajax處理跨域的兩種解決方案

 

一、jsonp

JSONP（JSON with Padding）是JSON的一種」使用模式」，可用於解決主流瀏覽器的跨域數據訪問的問題。

JSONP的原理是動態添加一個<script>標籤，而script標籤的src屬性是沒有跨域的限制的。這樣說來，這種跨域方式其實與ajax XmlHttpRequest協議無關了。

實踐應用 -- ajax請求代碼：

上述代碼，發出的請求地址大概爲：http://119.23.129.15:8112/api/basic/AuditStatus?jsonpCallback=jquery111111（jquery111111爲隨機生成的字符串，不用關心其值）

ajax發送請求時，須要在客戶端註冊一個callback（如：jsonpCallback）, 而後把callback的名字（如：jquery111111）傳給服務器。

注意：服務端獲得callback的數值後，要用jquery111111(...)把將要輸出的json內容包括起來，此時，服務器生成 json 數據才能被客戶端正確接收。

也就是說，接口返回的數據，須要拼接上callback的值，上面代碼，經過jsonp設置參數名，設置了jsonpCallback

那麼，接口須要接收jsonpCallback的值，並拼接上返回的數據，格式： jsonpCallback+ "("+data+")"

 

二、CORS（跨域資源共享）

這個方案實現起來很是簡單，只需由服務器發送一個響應標頭便可

response.setHeader("Access-Control-Allow-Origin","*") 

「*」號表示容許任何域向咱們的服務端提交請求

也能夠設置指定容許訪問的域名，如域名 http://www.test2.com 

response.setHeader("Access-Control-Allow-Origin","http://www.test2.com") 

 

如圖，在服務端設置了一個響應標頭容許全部資源訪問以後，8968端口也能訪問到8112端口的接口了。

 

對比JSONP與CORS

CORS與JSONP相比，更爲先進、方便和可靠。

JSONP只能實現GET請求，而CORS支持全部類型的HTTP請求。

使用CORS，開發者能夠使用普通的XMLHttpRequest發起請求和得到數據，比起JSONP有更好的錯誤處理。

CORS瀏覽器支持狀況：