天天看點

跨域通路之JSONP跨域同源政策:如何解決?實戰

在平常的工作中常常會遇到A站點的需要通路B站點的資源.

這時就産生了跨域通路。

跨域是指從一個域名的網頁去請求另一個域名的資源。浏覽器遵循同源政策,不允許A站點的Javascript 讀取B站點傳回的資料。因為A站點的javascript 與B傳回的資料不同源的。但是浏覽器并不阻止A的Ajax請求通路B,浏覽器允許A取回B的資料,但是不允許A中的腳本操作B的資料。如下圖所示的③

跨域通路之JSONP跨域同源政策:如何解決?實戰

資料與操作必須是同源的,否則不能操作。

什麼是同源:浏覽器認為的同源是什麼?

判斷是否同源,标準如下

主機名:IP或域名

端口号:

協定:http,https

如果操作的腳本與資料同源,那麼浏覽器不會阻止這樣的操作。那麼如何做呢?

浏覽器調用js檔案時則不受跨域的影響(不僅如此,我們還發現凡是擁有”src”這個屬性的标簽都擁有跨域的能力,比如<script>、<img>、<iframe>,如果能把操作與資料放在一起,那麼浏覽器就會網開一面,對此操作放行。

跨域通路之JSONP跨域同源政策:如何解決?實戰

這時JSONP 應運而生。

JSONP:Jsonp(JSON with Padding) 是 json 的一種"使用模式",可以讓網頁從别的域名(網站)那擷取資料,即跨域讀取資料。

l  項目結構

跨域通路之JSONP跨域同源政策:如何解決?實戰

hbb0b0.mvc.website 站點 hbb0b0/index頁面擷取 站點Hbb0b0.mvc.API 下StudentController/GetStudentList 的資料

l  hbb0b0.mvc.website  index頁面代碼如下:

l  Hbb0b0.mvc.API StudentController/GetStudentList 代碼如下

l  執行結果:

跨域通路之JSONP跨域同源政策:如何解決?實戰

本文轉自xmgdc51CTO部落格,原文連結:http://blog.51cto.com/12953214/1942282 ,如需轉載請自行聯系原作者

繼續閱讀