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一样：

查找原因是浏览器对简单跨域请求和复杂跨域请求的处理区别。

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);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     				}
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     			});
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     		},