ajax中出现两次请求

r囧r小猫 2022-05-24 14:09 281阅读 0赞

在项目中发现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一样：

![20171018145719668][]![78272329][]

![78272329][]![20171018145735259][]

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

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等请求的发出。

解决的方法

if("OPTIONS".equals(httpRequest.getMethod())){
                filterChain.doFilter(httpRequest, httpResponse);
                return;
            }

[20171018145719668]: https://img-blog.csdn.net/20171018145719668
[78272329]: /images/20220524/e517e2d6ea8047b9adae01c3100f7a01.png
[20171018145735259]: /images/20220524/801ce4406c1e4a2e92937876a4418003.png