Http跨域時候預檢沒通過的幾種原因


網上大多數涉及的原因(直接復制粘帖):

CORS把HTTP請求分成兩類,不同類別按不同的策略進行跨域資源共享協商。

1. 簡單跨域請求。
當HTTP請求出現以下兩種情況時,瀏覽器認為是簡單跨域請求:

1). 請求方法是GET、HEAD或者POST,並且當請求方法是POST時,Content-Type必須是application/x-www-form-urlencoded, multipart/form-data或着text/plain中的一個值。
2). 請求中沒有自定義HTTP頭部。

對於簡單跨域請求,瀏覽器要做的就是在HTTP請求中添加Origin Header,將JavaScript腳本所在域填充進去,向其他域的服務器請求資源。服務器端收到一個簡單跨域請求后,根據資源權限配置,在響應頭中添加Access-Control-Allow-Origin Header。瀏覽器收到響應后,查看Access-Control-Allow-Origin Header,如果當前域已經得到授權,則將結果返回給JavaScript。否則瀏覽器忽略此次響應。

2. 帶預檢(Preflighted)的跨域請求。
當HTTP請求出現以下兩種情況時,瀏覽器認為是帶預檢(Preflighted)的跨域請求:

1). 除GET、HEAD和POST(only with application/x-www-form-urlencoded, multipart/form-data, text/plain Content-Type)以外的其他HTTP方法。
2). 請求中出現自定義HTTP頭部。

帶預檢(Preflighted)的跨域請求需要瀏覽器在發送真實HTTP請求之前先發送一個OPTIONS的預檢請求,檢測服務器端是否支持真實請求進行跨域資源訪問,真實請求的信息在OPTIONS請求中通過Access-Control-Request-Method Header和Access-Control-Request-Headers Header描述,此外與簡單跨域請求一樣,瀏覽器也會添加Origin Header。服務器端接到預檢請求后,根據資源權限配置,在響應頭中放入Access-Control-Allow-Origin Header、Access-Control-Allow-Methods和Access-Control-Allow-Headers Header,分別表示允許跨域資源請求的域、請求方法和請求頭。此外,服務器端還可以加入Access-Control-Max-Age Header,允許瀏覽器在指定時間內,無需再發送預檢請求進行協商,直接用本次協商結果即可。瀏覽器根據OPTIONS請求返回的結果來決定是否繼續發送真實的請求進行跨域資源訪問。這個過程對真實請求的調用者來說是透明的。

XMLHttpRequest支持通過withCredentials屬性實現在跨域請求攜帶身份信息(Credential,例如Cookie或者HTTP認證信息)。瀏覽器將攜帶Cookie Header的請求發送到服務器端后,如果服務器沒有響應Access-Control-Allow-Credentials Header,那么瀏覽器會忽略掉這次響應。

這里討論的HTTP請求是指由Ajax XMLHttpRequest對象發起的,所有的CORS HTTP請求頭都可由瀏覽器填充,無需在XMLHttpRequest對象中設置。以下是CORS協議規定的HTTP頭,用來進行瀏覽器發起跨域資源請求時進行協商:
1. Origin。HTTP請求頭,任何涉及CORS的請求都必需攜帶。
2. Access-Control-Request-Method。HTTP請求頭,在帶預檢(Preflighted)的跨域請求中用來表示真實請求的方法。
3. Access-Control-Request-Headers。HTTP請求頭,在帶預檢(Preflighted)的跨域請求中用來表示真實請求的自定義Header列表。
4. Access-Control-Allow-Origin。HTTP響應頭,指定服務器端允許進行跨域資源訪問的來源域。可以用通配符*表示允許任何域的JavaScript訪問資源,但是在響應一個攜帶身份信息(Credential)的HTTP請求時,Access-Control-Allow-Origin必需指定具體的域,不能用通配符。
5. Access-Control-Allow-Methods。HTTP響應頭,指定服務器允許進行跨域資源訪問的請求方法列表,一般用在響應預檢請求上。
6. Access-Control-Allow-Headers。HTTP響應頭,指定服務器允許進行跨域資源訪問的請求頭列表,一般用在響應預檢請求上。
7. Access-Control-Max-Age。HTTP響應頭,用在響應預檢請求上,表示本次預檢響應的有效時間。在此時間內,瀏覽器都可以根據此次協商結果決定是否有必要直接發送真實請求,而無需再次發送預檢請求。

8. Access-Control-Allow-Credentials。HTTP響應頭,凡是瀏覽器請求中攜帶了身份信息,而響應頭中沒有返回Access-Control-Allow-Credentials: true的,瀏覽器都會忽略此次響應。

容易忽略的地方(也是在網上找了大半天都沒找到問題的原因):

本人問題突破口(xhr響應報錯:syntax error 響應語法錯誤)

首先我的跨域不是簡單跨域,需要發送預檢請求,然后怎么按照網上的配置始終預檢通不過,開始懷疑是不是option請求設置問題,然后找找找

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS   看完這個之后發現option請求應該問題不打,然后看請求的響應發現報了錯,這個時候發現問題可能出在服務器端仔細研究發現后台沒有針對option請求的正確響應,找到問題就好解決了,以下是配置OPTIONS請求相應的一個簡單示例(Nodejs),應根據自己響應情況做具體修改

app.all('/*',function(req,res,next){
  if(req.method === 'OPTIONS'){
     res.status(200).end();
  }else{
     next();
  }
 });   

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM