天天看點

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

轉載、參考:

http://levy.work/2016-09-01-why-got-options-request-via-ajax/

http://blog.csdn.net/u012017645/article/details/54315923

https://segmentfault.com/q/1010000007963647

http://www.tangshuang.net/2271.html

在項目中發現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一樣:

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

查找原因是浏覽器對簡單跨域請求和複雜跨域請求的處理差別。

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);
				}
			});
		}
           
AJAX中出現兩次請求,OPTIONS請求和GET請求
AJAX中出現兩次請求,OPTIONS請求和GET請求
AJAX中出現兩次請求,OPTIONS請求和GET請求