IT星球论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 17|回复: 0

AJAX中自定义header出现两次请求终极解决方案

[复制链接]

17

主题

1

好友

267

积分

IT初级专家

Rank: 3Rank: 3

升级  22.33%

发表于 2018-9-6 13:48:41 |显示全部楼层
本帖最后由 itata 于 2018-9-6 13:53 编辑

AJAX中自定义header出现两次请求终极解决方案:
端返回的时候添加Access-Control-Allow-Origin头信息,就能支持跨域请求。
apple-system, "">服务端使用jQuery的ajax需要增加crossDomain: true,参数

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


  •                                 }


  •                         });


  •                 },

本文参考:
https://blog.csdn.net/cc1314_/article/details/78272329
https://segmentfault.com/q/1010000004486011
该会员没有填写今日想说内容.
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

回顶部