天天看點

解決跨域-jsonp

在通過ajax進行前後端互動,擷取接口時,會遇到No 'Access-Control-Allow-Origin’的跨域報錯

為什麼産生跨域錯誤?

因為浏覽器的同源政策。

概念性的解釋下同源政策。

同源政策:同源政策阻止從一個域上加載的腳本擷取或操作另一個域上的文檔屬性。也就是說,受到請求的 URL 的域必須與目前 Web 頁面的域相同。同源政策是浏覽器最核心也最基本的安全功能,如果缺少了同源政策,則浏覽器的正常功能可能都會受到影響。可以說Web是建構在同源政策基礎之上的,浏覽器隻是針對同源政策的一種實作。

解決跨域-jsonp

總結:端口不同,域名不同,協定不同 出現跨域

那麼如何解決跨域問題呢?

一般常使用的有三種方法:

1.後端代理(後端不存在跨域)

2.CORS解決跨域

3.jsonp(json with padding)----前端常用的

解釋下CORS解決跨域:

CORS是一個W3C标準,全稱是"跨域資源共享"(Cross-origin resource sharing)。 它允許浏覽器向跨源(協定 + 域名 + 端口)伺服器,發出 XMLHttpRequest請求, 進而克服了AJAX隻能同源使用的限制。

需要伺服器(提供接口的源碼裡面)添加下面兩句話。

解決跨域-jsonp

重點講下jsonp

jsonp:(json with padding).資料填充的方式

一、首先一步步進行推導下

解決跨域-jsonp

說明:

1.script标簽的src屬性不存在跨域

二、接下來進入核心部分了

思考:如果要在剛才建立的data.rar壓縮包裡的資料是 [“zhangsan”,“lisi”,“wangwu”] 這樣的json資料,怎麼取到?

取不到,但是如果說裡面的資料是 fn([“zhangsan”,“lisi”,“wangwu”])

這是個json資料吧,把它填充到一個函數裡面來了吧,是以叫json with padding。其實就是将json資料填充給一個函數或者方法

解決跨域-jsonp

說明:

1.script利用了回調函數

使用jsonp有個要求:如果第三方接口jsonp格式的,無需後端參與,獨立完成。

三、做個請求淘寶搜尋下拉提示的小案例:

首先說明下接口怎麼拿?淘寶頁面按下F12,打開network裡的XHR,在淘寶搜尋框輸入些内容就可以看到接口檔案了

解決跨域-jsonp

效果展示圖:

解決跨域-jsonp

jsonp總結:

1.jsonp脫離ajax

2.script标簽的src屬性不存在跨域。

3.script利用回調函數

繼續閱讀