国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Ajax跨域

xiaotianyi / 3472人閱讀

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

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

Ajax跨域簡介

常用跨域方法

CORS

JSONP

Ajax跨域簡介

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

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

給一個例子，對于第一個服務器資源，其他一些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是一個W3C標準，其全稱為Cross-Origin Resource Sharing，即跨域資源共享。它允許瀏覽器向跨域服務器發(fā)送XMLHttpRequest請求，從而克服了Ajax只能同源使用的限制

CORS需要瀏覽器和服務器同時支持，目前主流瀏覽器都支持這個標準(IE>=10)，所以CORS的關鍵主要在于服務器，要支持這個功能，往往開發(fā)者需要在服務器端進行額外設置

另外，CORS標準對用戶來說是透明的，用戶感知不到CORS的存在，一切都是瀏覽器自動完成。當瀏覽器檢測到跨域的Ajax請求時，就會自動做出一些處理，使得請求能夠跨域

跨域的Ajax請求分為兩種：

簡單請求:

請求方法為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之一

非簡單請求: 所有不滿足上述規(guī)則的請求

CORS對于兩種不同的請求的處理是不同的

對于簡單請求，一個跨域Ajax請求的處理流程如下:

瀏覽器自動在本次請求的HTTP頭中添加Origin字段，表示這次請求來自的域

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

如果不在，返回一個正常的HTTP響應，只不過響應的HTTP頭中沒有Access-Control-Allow-Origin字段，瀏覽器將認為這一次跨域Ajax沒能成功

如果在，服務器會在響應HTTP頭中添加這幾個字段

Access-Control-Allow-Origin: 這個字段標識服務器認同的Origin，這個Origin為*時標識服務器認同所有源。只有請求的HTTP頭的Origin與該字段同源時，瀏覽器才會認為這一次跨域Ajax請求成功了

Access-Control-Allow-Credentials: 這個字段標識服務器允許Cookie，如果設置為true則標識允許，默認為不允許

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

對于非簡單請求，一個跨域Ajax請求的處理流程如下:

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

Origin: 請求的源

Access-Control-Request-Method: 瀏覽器會用的的HTTP方法

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

收到這個請求之后，服務器將會返回一些控制信息，最重要的仍然是上面說到的判定是否允許跨域的Access-Control-Allow-Origin

如果服務器返回了一個正常的HTTP響應，則瀏覽器會認為OPTIONS請求成功，接下來則會進行真正的的請求

服務器正常處理真正的請求，并且在返回的HTTP響應中也帶上Access-Control-Allow-Origin，瀏覽器會再一次校驗這一字段

可見CORS標準本身并不復雜，其核心是服務器和瀏覽器驗證域是否被允許

JSONP

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

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

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

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

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

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

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/97211.html

相關文章

  • ajax跨域，這應該是最全的解決方案了

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

    ytwman 評論0 收藏0

  • 再也不學AJAX了！（三）跨域獲取資源 ② - JSONP & CORS

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

    enda 評論0 收藏0

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

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

    Yangyang 評論0 收藏0

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

    摘要：時間年月日星期三說明本文部分內容均來自慕課網(wǎng)。當預檢請求通過的時候，才發(fā)送真正的請求。 時間：2018年04月18日星期三說明：本文部分內容均來自慕課網(wǎng)。@慕課網(wǎng)：https://www.imooc.com教學源碼：https://github.com/zccodere/s...學習源碼：https://github.com/zccodere/s... 第一章：課程介紹 1-1 課程介...

    fredshare 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<