http傳送兩次請求,一次option,一次get
阿新 • • 發佈:2018-12-18
在專案中發現ajax中出現兩次請求,OPTIONS請求和GET請求,得到的資料出錯,所以想要去掉OPTIONS請求。
ajax請求如下:
ajaxRequestGet: function (lastPath, requestParams, successFun) { $.ajax({ headers: { 'GISTTOKEN': getToken() }, url: this.baseUrl+lastPath, type: "get", data: requestParams, success: function(data){ successFun(data); } }); }
檢視到瀏覽器NetWork有兩次請求,請求url一樣:
查詢原因是瀏覽器對簡單跨域請求和複雜跨域請求的處理區別。
XMLHttpRequest會遵守同源策略(same-origin policy). 也即指令碼只能訪問相同協議/相同主機名/相同埠的資源, 如果要突破這個限制, 那就是所謂的跨域, 此時需要遵守CORS(Cross-Origin Resource Sharing)機制。
那麼, 允許跨域, 不就是服務端設定Access-Control-Allow-Origin: *就可以了嗎? 普通的請求才是這樣子的, 除此之外, 還一種叫請求叫preflighted request。
preflighted request在傳送真正的請求前, 會先發送一個方法為OPTIONS的預請求(preflight request), 用於試探服務端是否能接受真正的請求,如果options獲得的迴應是拒絕性質的,比如404\403\500等http狀態,就會停止post、put等請求的發出。
那麼, 什麼情況下請求會變成preflighted request呢?
1、請求方法不是GET/HEAD/POST
2、POST請求的Content-Type並非application/x-www-form-urlencoded, multipart/form-data, 或text/plain
3、請求設定了自定義的header欄位
上面請求中設定了自定義的headers欄位,出現了option請求。把自定義headers欄位刪掉後,只剩下get請求:
ajaxRequestGet: function (lastPath, requestParams, successFun) { $.ajax({ url : this.baseUrl+lastPath, type : "get", data: requestParams, success : function(data){ successFun(data); } }); }