1事故情況:在前端ajax請求資料的時候,有時候會向後台一次性傳送兩次請求,,這兩次請求第一次無返回資料,第二次才會返回正確資料。
2事故原因:原來對於跨域,有兩種不同的請求型別。分別為簡單跨域請求和複雜跨域請求(帶預檢的跨域請求)。
3複雜跨域:
非簡單請求的cors請求,會在正式通訊之前,增加一次http查詢請求,稱為"預檢"請求(preflight)。
預檢請求為options請求,用於向伺服器請求許可權資訊的。
預檢請求被成功響應後,才會發出真實請求,攜帶真實資料。
4解決方式:而本專案,後台採用token檢驗機制,前台傳送請求必須將token放到request header中,而請求頭中攜帶自定義引數,瀏覽器就認為請求是複雜跨域請求,所以瀏覽器在真正 請求之前會傳送一次預檢請求,檢測伺服器是否支援真實請求進行跨域訪問。
5其他問題:剛開始執行的時候,提示跨域。服務端設定access-control-allow-origin: *允許跨域
但是還報錯:還是得服務端設定允許的header。
access-control-allow-headers:後面加允許的header的引數,中間用逗號隔開。
還是會傳送兩次請求:
後台可以通過設定access-control-max-age來控制瀏覽器在多長時間內(單位s)無需在請求時傳送預檢請求。
6補充點:ajax設定自定義請求頭的兩種方法
方法一:
$.ajax(,
datatype: "json",
//重點
});方法二:
$.ajax(,
url: url,
data: data,
success: function(data) ,
error: function(err)
});
ajax中出現兩次請求
在專案中發現ajax中出現兩次請求,options請求和get請求,得到的資料出錯,所以想要去掉options請求。ajax請求如下 ajaxrequestget function lastpath,requestparams,successfun url this.baseurl lastpath...
前端使用ajax時,自動請求了兩次
如下 之所以會傳送2次請求,那是因為我們使用了帶預檢 preflighted 的跨域請求。該請求會在傳送真實的請求之前傳送乙個型別為options的預檢請求。預檢請求會檢測伺服器是否支援我們的真實請求所需要的跨域資源,唯有資源滿足條件才會傳送真實的請求。比如我們在請求頭部增加了authorizati...
呼叫一次AJAX,傳送兩次請求
瀏覽器對複雜跨域請求的處理,在傳送真正的請求前,會先傳送乙個方法為options的預請求 preflight request 用於試探服務端是否能接受真正的請求,如果options獲得的回應是拒絕性質的,比如404 403 500等http狀態,就會停止post put等請求的發出。有三種方式會導致...