亚洲欧美日韩综合系列在线_91精品人妻一区二区_欧美大肥婆一级特大AA片_九色91视频免费观看_亚洲综合国产精品_av中文字幕在线不卡_久久精品色综合网_看黄色视频的软件_无卡无码高清中文字幕码2024_亚洲欧美日韩天堂网

ajax axios 等跨域問題

來源:qq_35285375 發(fā)布時間:2018-06-30 17:11:58 閱讀量:1649

(1)想講一下ajax 與 axios 都是什么東西?

 兩者都是基于瀏覽器的,從瀏覽器中創(chuàng)建 XMLHttpRequest。

XMLHttpRequest是一個瀏覽器接口,使得Javascript可以進行HTTP(S)通信,這就是我們熟悉的AJAX。

而axios 是從 node.js 發(fā)出 http 請求

XMLHttpRequest定義在XHR誕生前,網(wǎng)頁要獲取客戶端和服務器的任何狀態(tài)更新,都需要刷新一次,在XHR誕生后就可以完全通過JS代碼異步實現(xiàn)這一過程。XHR的誕生也使最初的網(wǎng)頁制作轉(zhuǎn)換為開發(fā)交互應用,拉開了WEB2.0的序幕。 

XHR是一種瀏覽器API,極大簡化了異步通信的過程,開發(fā)者并不需要關注底層的實現(xiàn),因為瀏覽器會為我們完成這些工作,如連接管理、協(xié)議協(xié)商、HTTP請求格式化等等。最初版本的XHR能力非常有限,只支持文本傳輸,處理上傳能力也不足,對于跨域請求也不支持

(2)然后是什么是跨域

跨域簡單就是兩個或多個不同域名之間的調(diào)用和數(shù)據(jù)傳輸,同時域名相同端口不同也屬于跨域范疇。

為什么會出現(xiàn)跨域問題?

還的講一下xhr

XMLHttpRequest 對象提供了對 HTTP 協(xié)議的完全的訪問,包括做出 POST 和 HEAD 請求以及普通的 GET 請求的能力。XMLHttpRequest 可以同步或異步地返回 Web 服務器的響應,并且能夠以文本或者一個 DOM 文檔的形式返回內(nèi)容。XHR接口強制要求每個請求都具備嚴格的HTTP語義–應用提供數(shù)據(jù)和URL,瀏覽器格式化請求并管理每個連接的完整生命周期,所以XHR僅僅允許應用自定義一些HTTP首部,但更多的首部是不能自己設定的,如:

  • Accept-Charset, Accept-Encoding, Access-Control-*

  • Host, Upgrade, Connection, Referer, Origin

  • Cookie, Sec-, Proxy-, 及其他首部

瀏覽器會拒絕絕對不安全的首部重寫,以保證應用不能假扮用戶代理、用戶或請求來源,如Origin由瀏覽器自動設置,Access-Control-Allow-Origin由服務器設置,如果接受該請求,不包含該字段即可,瀏覽器發(fā)出的請求將作廢。

然而客戶端提供兩種請求 1、簡單請求 2 非簡單請求

在正式跨域的請求前,瀏覽器會根據(jù)需要,發(fā)起一個“PreFlight”(也就是Option請求),用來讓服務端返回允許的方法(如get、post),被跨域訪問的Origin(來源,或者域),還有是否需要Credentials(認證信息)

三種場景:
1. 如果跨域的請求是Simple Request(簡單請求 ),則不會觸發(fā)“PreFlight”。Mozilla對于簡單請求的要求是:
以下三項必須都成立:
1. 只能是Get、Head、Post方法
2. 除了瀏覽器自己在Http頭上加的信息(如Connection、User-Agent),開發(fā)者只能加這幾個:Accept、Accept-Language、Content-Type、。。。。
3. Content-Type只能取這幾個值:
  • application/x-www-form-urlencoded

  • multipart/form-data

  • text/plain


默認情況下,axios將JavaScript對象序列化為JSON來發(fā)送,也就是說會使用 'application/json'作為Content-Type,變得“不簡單”了,你可以用qs庫來處理post的data

如果不是這個原因,那就檢查有沒有設置一些自定義的header

option請求:

OPTIONS 方法比較少見,該方法用于請求服務器告知其支持哪些其他的功能和方法。通過 OPTIONS 方法,可以詢問服務器具體支持哪些方法,或者服務器會使用什么樣的方法來處理一些特殊資源??梢哉f這是一個探測性的方法,客戶端通過該方法可以在不訪問服務器上實際資源的情況下就知道處理該資源的最優(yōu)方式。

1、獲取服務器支持的HTTP請求方法;也是黑客經(jīng)常使用的方法。

2、用來檢查服務器的性能。例如:AJAX進行跨域請求時的預檢,需要向另外一個域名的資源發(fā)送一個HTTP OPTIONS請求頭,用以判斷實際發(fā)送的請求是否安全。

響應頭中關鍵性的字段:

Access-Control-Allow-Method: POSTAccess-Control-Allow-Origin: http://xxx.com

Access-Control-Allow-Method 和 Access-Control-Allow-Origin 分別告知客戶端,服務器允許客戶端用于跨域的方法和域名。

 Access-Control-Allow-Origin為客戶端域名,Access-Control-Allow-Method 為運行客戶端執(zhí)行的方法,

大部分的請求是需要用戶攜帶著用戶信息的,比如在一個登錄的系統(tǒng)中,用戶會攜帶著相應的cookie或token,但CORS跨域默認是不帶身份憑證的。

如果需要附帶身份憑證,在發(fā)送請求時,通過將withCredentials屬性設置為true,可以指定某個請求可以發(fā)送憑據(jù)。                                             

附帶身份憑證對服務端有兩個要求:

  1. 服務端的Access-Control-Allow-Origin頭部不能設置為*

  2. 服務端的Access-Control-Allow-Credentials頭部設置為true               

原文地址 https://blog.csdn.net/qq_35285375/article/details/80855678


標簽: HTML JS
分享:
評論:
你還沒有登錄,請先