成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Ajax跨域

xiaotianyi / 3499人閱讀

摘要：發(fā)布自的博客，歡迎大家轉(zhuǎn)載，但是要注意注明出處。另外，該文章收納在的個(gè)人的知識(shí)整理倉(cāng)庫(kù)，歡迎投稿跨域簡(jiǎn)介常用跨域方法跨域簡(jiǎn)介所謂跨域指的是請(qǐng)求從其他的域獲取數(shù)據(jù)或者傳輸數(shù)據(jù)所謂域同源，指的是兩個(gè)服務(wù)器資源的根的域名端口協(xié)議三者完全相同，只要

發(fā)布自Kindem的博客，歡迎大家轉(zhuǎn)載，但是要注意注明出處。另外，該文章收納在Kindem的個(gè)人的 IT 知識(shí)整理倉(cāng)庫(kù)，歡迎 Star、Fork、投稿

Ajax跨域簡(jiǎn)介

常用跨域方法

CORS

JSONP

Ajax跨域簡(jiǎn)介

所謂Ajax跨域指的是Ajax請(qǐng)求從其他的域獲取數(shù)據(jù)或者傳輸數(shù)據(jù)

所謂域同源，指的是兩個(gè)服務(wù)器資源的根url的域名、端口、協(xié)議三者完全相同，只要三者中任何一個(gè)不同，則說(shuō)明產(chǎn)生了跨域

給一個(gè)例子，對(duì)于第一個(gè)服務(wù)器資源，其他一些url的同源情況如下:

http://www.test.com/index.html

http://www.test.com/index.js            同源
http://www.test.com/login/login.js      同源
https://www.test.com/index.html         跨域(協(xié)議)
http://www.a.com/index.html             跨域(域名)
http://a.com/index.html                 跨域(不同子域)
http://www.test.com:8080/index.html     跨域(端口)
常用跨域方法 CORS

CORS是一個(gè)W3C標(biāo)準(zhǔn)，其全稱為Cross-Origin Resource Sharing，即跨域資源共享。它允許瀏覽器向跨域服務(wù)器發(fā)送XMLHttpRequest請(qǐng)求，從而克服了Ajax只能同源使用的限制

CORS需要瀏覽器和服務(wù)器同時(shí)支持，目前主流瀏覽器都支持這個(gè)標(biāo)準(zhǔn)(IE>=10)，所以CORS的關(guān)鍵主要在于服務(wù)器，要支持這個(gè)功能，往往開發(fā)者需要在服務(wù)器端進(jìn)行額外設(shè)置

另外，CORS標(biāo)準(zhǔn)對(duì)用戶來(lái)說(shuō)是透明的，用戶感知不到CORS的存在，一切都是瀏覽器自動(dòng)完成。當(dāng)瀏覽器檢測(cè)到跨域的Ajax請(qǐng)求時(shí)，就會(huì)自動(dòng)做出一些處理，使得請(qǐng)求能夠跨域

跨域的Ajax請(qǐng)求分為兩種：

簡(jiǎn)單請(qǐng)求:

請(qǐng)求方法為HEAD、POST、GET之一

HTTP頭字段只有Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type中的一種或多種

HTTP頭字段中的Content-Type字段的取值為application/x-www-form-urlencoded、multipart/form-data、text/plain之一

非簡(jiǎn)單請(qǐng)求: 所有不滿足上述規(guī)則的請(qǐng)求

CORS對(duì)于兩種不同的請(qǐng)求的處理是不同的

對(duì)于簡(jiǎn)單請(qǐng)求，一個(gè)跨域Ajax請(qǐng)求的處理流程如下:

瀏覽器自動(dòng)在本次請(qǐng)求的HTTP頭中添加Origin字段，表示這次請(qǐng)求來(lái)自的域

服務(wù)器根據(jù)Origin字段判斷這一次請(qǐng)求是否在許可范圍內(nèi)：

如果不在，返回一個(gè)正常的HTTP響應(yīng)，只不過(guò)響應(yīng)的HTTP頭中沒有Access-Control-Allow-Origin字段，瀏覽器將認(rèn)為這一次跨域Ajax沒能成功

如果在，服務(wù)器會(huì)在響應(yīng)HTTP頭中添加這幾個(gè)字段

Access-Control-Allow-Origin: 這個(gè)字段標(biāo)識(shí)服務(wù)器認(rèn)同的Origin，這個(gè)Origin為*時(shí)標(biāo)識(shí)服務(wù)器認(rèn)同所有源。只有請(qǐng)求的HTTP頭的Origin與該字段同源時(shí)，瀏覽器才會(huì)認(rèn)為這一次跨域Ajax請(qǐng)求成功了

Access-Control-Allow-Credentials: 這個(gè)字段標(biāo)識(shí)服務(wù)器允許Cookie，如果設(shè)置為true則標(biāo)識(shí)允許，默認(rèn)為不允許

Access-Control-Expose-Headers: 允許XMLHttpRequest獲取的額外字段名

對(duì)于非簡(jiǎn)單請(qǐng)求，一個(gè)跨域Ajax請(qǐng)求的處理流程如下:

瀏覽器在發(fā)送正式的Ajax請(qǐng)求之前，會(huì)提前發(fā)送一次OPTIONS請(qǐng)求，頭信息中有:

Origin: 請(qǐng)求的源

Access-Control-Request-Method: 瀏覽器會(huì)用的的HTTP方法

Access-Control-Request-Headers: 瀏覽器會(huì)額外發(fā)送的頭信息字段

收到這個(gè)請(qǐng)求之后，服務(wù)器將會(huì)返回一些控制信息，最重要的仍然是上面說(shuō)到的判定是否允許跨域的Access-Control-Allow-Origin

如果服務(wù)器返回了一個(gè)正常的HTTP響應(yīng)，則瀏覽器會(huì)認(rèn)為OPTIONS請(qǐng)求成功，接下來(lái)則會(huì)進(jìn)行真正的的請(qǐng)求

服務(wù)器正常處理真正的請(qǐng)求，并且在返回的HTTP響應(yīng)中也帶上Access-Control-Allow-Origin，瀏覽器會(huì)再一次校驗(yàn)這一字段

可見CORS標(biāo)準(zhǔn)本身并不復(fù)雜，其核心是服務(wù)器和瀏覽器驗(yàn)證域是否被允許

JSONP

JSONP的全稱為JSON with Padding，是JSON數(shù)據(jù)的一種使用模式，JSONP同樣是為了支持跨域Ajax請(qǐng)求而生的，但是它相對(duì)CORS來(lái)說(shuō)對(duì)古老的瀏覽器兼容性較好，也更加簡(jiǎn)單。

JSONP的原理是JavaScript注入，在html中使用

想象一下如果引入的腳本是這樣的:

dealData({
    username: "kindem",
    age: 15,
    // ...
});

不是就相當(dāng)于從服務(wù)器拿到一段數(shù)據(jù)并且進(jìn)行處理了嗎?

接下來(lái)可以設(shè)想一下，假設(shè)服務(wù)器對(duì)于src指向的url的處理并不是返回一個(gè)靜態(tài)文件，而是動(dòng)態(tài)地組合出一段文本，這段文本一上面給的形式返回，里面的參數(shù)由服務(wù)器動(dòng)態(tài)生成，而調(diào)用的函數(shù)則是前端約定好的函數(shù)，則相當(dāng)于變相地返回了一段跨域的數(shù)據(jù)，這就是JSONP的核心思想

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/97211.html

相關(guān)文章

  • ajax跨域，這應(yīng)該是最全的解決方案了

    摘要：關(guān)于，強(qiáng)烈推薦閱讀跨域資源共享詳解阮一峰另外，這里也整理了一個(gè)實(shí)現(xiàn)原理圖簡(jiǎn)化版如何判斷是否是簡(jiǎn)單請(qǐng)求瀏覽器將請(qǐng)求分成兩類簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求。 前言 從剛接觸前端開發(fā)起，跨域這個(gè)詞就一直以很高的頻率在身邊重復(fù)出現(xiàn)，一直到現(xiàn)在，已經(jīng)調(diào)試過(guò)N個(gè)跨域相關(guān)的問(wèn)題了，16年時(shí)也整理過(guò)一篇相關(guān)文章，但是感覺還是差了點(diǎn)什么，于是現(xiàn)在重新梳理了一下。 個(gè)人見識(shí)有限，如有差錯(cuò)，請(qǐng)多多見諒，歡迎提出iss...

    ytwman 評(píng)論0 收藏0

  • 再也不學(xué)AJAX了?。ㄈ?em>跨域獲取資源 ② - JSONP & CORS

    摘要：瀏覽器的同源策略固然保障了互聯(lián)網(wǎng)世界的數(shù)據(jù)隱私與數(shù)據(jù)安全，但是如果當(dāng)我們需要使用跨域請(qǐng)求資源時(shí)，同源策略又會(huì)成為開發(fā)者的阻礙。我們之前提到過(guò)，如果想要繞過(guò)瀏覽器同源策略，實(shí)現(xiàn)使用技術(shù)跨域獲取資源，需要服務(wù)端和客戶端的協(xié)同合作。 瀏覽器的同源策略固然保障了互聯(lián)網(wǎng)世界的數(shù)據(jù)隱私與數(shù)據(jù)安全，但是如果當(dāng)我們需要使用AJAX跨域請(qǐng)求資源時(shí)，同源策略又會(huì)成為開發(fā)者的阻礙。在本文中，我們會(huì)簡(jiǎn)單介紹需...

    enda 評(píng)論0 收藏0

  • 20K前端大佬面試(關(guān)于如何回答ajax跨域問(wèn)題)

    摘要：在接觸前端開發(fā)起，跨域這個(gè)詞就一直以很高的頻率在我們學(xué)習(xí)工作中重復(fù)出現(xiàn)，最近在工作中遇到了跨域的相關(guān)問(wèn)題，這里我把它總結(jié)記錄一下。 在接觸前端開發(fā)起，跨域這個(gè)詞就一直以很高的頻率在我們學(xué)習(xí)工作中重復(fù)出現(xiàn)，最近在工作中遇到了跨域的相關(guān)問(wèn)題，這里我把它總結(jié)記錄一下。關(guān)于跨域，有N種類型，現(xiàn)在我只專注于ajax請(qǐng)求跨域(ajax跨域只是屬于瀏覽器同源策略中的一部分,其它的這里不做介紹)，內(nèi)容...

    Yangyang 評(píng)論0 收藏0

  • 慕課網(wǎng)_《Ajax跨域完全講解》學(xué)習(xí)總結(jié)

    摘要：時(shí)間年月日星期三說(shuō)明本文部分內(nèi)容均來(lái)自慕課網(wǎng)。當(dāng)預(yù)檢請(qǐng)求通過(guò)的時(shí)候，才發(fā)送真正的請(qǐng)求。 時(shí)間：2018年04月18日星期三說(shuō)明：本文部分內(nèi)容均來(lái)自慕課網(wǎng)。@慕課網(wǎng)：https://www.imooc.com教學(xué)源碼：https://github.com/zccodere/s...學(xué)習(xí)源碼：https://github.com/zccodere/s... 第一章：課程介紹 1-1 課程介...

    fredshare 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<