AJAX中出現兩次請求,OPTIONS請求和GET請求

在項目中發現ajax中出現兩次請求,OPTIONS請求和GET請求,獲得的數據出錯,因此想要去掉OPTIONS請求。ajax

ajax請求以下:跨域

  1. ajaxRequestGet: function (lastPath, requestParams, successFun) {瀏覽器

  2. $.ajax({app

  3. headers: {post

  4. 'GISTTOKEN': getToken()this

  5. },url

  6. url : this.baseUrl+lastPath,spa

  7. type : "get",code

  8. data: requestParams,orm

  9. success : function(data){

  10. successFun(data);

  11. }

  12. });

  13. },

查看到瀏覽器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呢? 

一、請求方法不是GET/HEAD/POST
二、POST請求的Content-Type並不是application/x-www-form-urlencoded, multipart/form-data, 或text/plain
三、請求設置了自定義的header字段

上面請求中設置了自定義的headers字段,出現了option請求。把自定義headers字段刪掉後,只剩下get請求:

  1. ajaxRequestGet: function (lastPath, requestParams, successFun) {

  2. $.ajax({

  3. url : this.baseUrl+lastPath,

  4. type : "get",

  5. data: requestParams,

  6. success : function(data){

  7. successFun(data);

  8. }

  9. });

  10. },

相關文章
相關標籤/搜索