跨域請(qǐng)求的完美解決方法(JSONP, CORS)
一個(gè)眾所周知的問題,Ajax直接請(qǐng)求普通文件存在跨域無權(quán)限訪問的問題。解決方法有JSONP,F(xiàn)lash等等。
JSONP
我們發(fā)現(xiàn),Web頁面上調(diào)用js文件時(shí)不受是否跨域的影響,凡是擁有"src"這個(gè)屬性的標(biāo)簽都擁有跨域的能力,比如<script>、<img>、<iframe>。那就是說如果要跨域訪問數(shù)據(jù),就服務(wù)端只能把數(shù)據(jù)放在js格式的文件里。恰巧我們知道JSON可以簡(jiǎn)潔的描述復(fù)雜數(shù)據(jù),而且JSON還被js原生支持,所以在客戶端幾乎可以隨心所欲的處理這種格式的數(shù)據(jù)。然后客戶端就可以通過與調(diào)用腳本一模一樣的方式,來調(diào)用跨域服務(wù)器上動(dòng)態(tài)生成的js格式文件??蛻舳嗽趯?duì)JSON文件調(diào)用成功之后,也就獲得了自己所需的數(shù)據(jù)。這就形成了JSONP的基本概念。允許用戶傳遞一個(gè)callback參數(shù)給服務(wù)端,然后服務(wù)端返回?cái)?shù)據(jù)時(shí)會(huì)將這個(gè)callback參數(shù)作為函數(shù)名來包裹住JSON數(shù)據(jù),這樣客戶端就可以隨意定制自己的函數(shù)來自動(dòng)處理返回?cái)?shù)據(jù)了。
jQuery支持JSONP的調(diào)用。在另外的一個(gè)域名中指定好回調(diào)函數(shù)名稱,就可以用下面的形式來就加載JSON數(shù)據(jù)。
url?callback=? jQuery.getJSON(url + "&callback=?", function(data) { alert(data.a + data.b); });
服務(wù)端當(dāng)然也要提供JSONP的支持,其實(shí)只要提供讀寫callback這個(gè)params就可以了。
跨域資源共享(CORS)
Cross-Origin Resource Sharing (CORS) 是W3c工作草案,它定義了在跨域訪問資源時(shí)瀏覽器和服務(wù)器之間如何通信。CORS背后的基本思想是使用自定義的HTTP頭部允許瀏覽器和服務(wù)器相互了解對(duì)方,從而決定請(qǐng)求或響應(yīng)成功與否。
CORS與JSONP相比,更為先進(jìn)、方便和可靠。
1、 JSONP只能實(shí)現(xiàn)GET請(qǐng)求,而CORS支持所有類型的HTTP請(qǐng)求。
2、 使用CORS,開發(fā)者可以使用普通的XMLHttpRequest發(fā)起請(qǐng)求和獲得數(shù)據(jù),比起JSONP有更好的錯(cuò)誤處理。
3、 JSONP主要被老的瀏覽器支持,它們往往不支持CORS,而絕大多數(shù)現(xiàn)代瀏覽器都已經(jīng)支持了CORS。
對(duì)一個(gè)簡(jiǎn)單的請(qǐng)求,沒有自定義頭部,要么使用GET,要么使用POST,它的主體是text/plain,請(qǐng)求用一個(gè)名叫Orgin的額外的頭部發(fā)送。Origin頭部包含請(qǐng)求頁面的頭部(協(xié)議,域名,端口),這樣服務(wù)器可以很容易的決定它是否應(yīng)該提供響應(yīng)。
服務(wù)器端對(duì)于CORS的支持,主要就是通過設(shè)置Access-Control-Allow-Origin來進(jìn)行的。
Header set Access-Control-Allow-Origin *
為了防止XSS攻擊我們的服務(wù)器, 我們可以限制域,比如
Access-Control-Allow-Origin: http://www.dbjr.com.cn
很多服務(wù)都已經(jīng)提供了CORS支持,比如 AWS 支持跨域資源分享功能CORS,向S3上傳不需要代理。
以上這篇跨域請(qǐng)求的完美解決方法(JSONP, CORS)就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
javascript實(shí)現(xiàn)用戶必須勾選協(xié)議實(shí)例講解
這篇文章主要介紹了javascript實(shí)現(xiàn)用戶必須勾選協(xié)議實(shí)例講解,寫頁面的時(shí)候經(jīng)常會(huì)用到,有感興趣的同學(xué)可以學(xué)習(xí)下2021-03-03onkeyup,onkeydown和onkeypress的區(qū)別介紹
三者在事件的響應(yīng)上還有一點(diǎn)不同,就是onkeydown 、onkeypress事件響應(yīng)的時(shí)候輸入的字符并沒有被系統(tǒng)接受,而響應(yīng)onkeyup的時(shí)候,輸入流已經(jīng)被系統(tǒng)接受2013-10-10淺談javascript中onbeforeunload與onunload事件
javascript中onbeforeunload與onunload事件就是頁面加載前與頁面關(guān)閉時(shí)的兩個(gè)功能的函數(shù),可以防止頁面刷新時(shí)給提示再刷新或頁面關(guān)閉時(shí)給出提示,下面我來介紹onbeforeunload與onunload事件用法。2015-12-12再JavaScript的jQuery庫中編寫動(dòng)畫效果的指南
這篇文章主要介紹了再JavaScript的jQuery庫中編寫動(dòng)畫效果的指南,包括一些內(nèi)建的效果方法的使用示例,需要的朋友可以參考下2015-08-08javascript獲得當(dāng)前的信息的一些常用命令
這篇文章主要介紹了javascript獲得當(dāng)前的信息的一些常用命令,需要的朋友可以參考下2015-02-02