ajax 跨域请求,每次会发送两个请求?
博客专区 > dubox 的博客 > 博客详情
ajax 跨域请求,每次会发送两个请求?
dubox 发表于2个月前
ajax 跨域请求,每次会发送两个请求?
  • 发表于 2个月前
  • 阅读 75
  • 收藏 1
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

跨域已经是个老话题了,但是最近搞百度的语音接口的时候,在服务端配置了 CORS ,跨域倒是没问题,但是每次都会发送两个请求:

第一条的请求信息是这样的:

method 是 OPTIONS,并且没有返回数据

然后第二条才是正常的请求;

查了资料发现这个 OPTIONS 是浏览器的预检请求,

而导致浏览器预检的原因是浏览器认为这次跨域请求为复杂请求( not-so-simple request 非简单请求);

浏览器对简单请求的判定规则是:

(1) 请求方法是以下三种方法之一:

  • HEAD
  • GET
  • POST

(2)HTTP的头信息不超出以下几种字段:

  • Accept
  • Accept-Language
  • Content-Language
  • Last-Event-ID
  • Content-Type:只限于三个值application/x-www-form-urlencodedmultipart/form-datatext/plain

来自:http://www.ruanyifeng.com/blog/2016/04/cors.html

如果不能同时满足上面两个条件则为复杂请求;

而百度 API 要求了 

Content-Type:audio/wav; rate=8000 header 项,所以不满足简单请求;

 

但同时浏览器也支持对预检结果的缓存,可以通过在服务端添加header 设置缓存时间:

add_header Access-Control-Max-Age 3600;

这是在 nginx 的配置方式,3600 是秒数

但是各浏览器支持的最长缓存时间也是不一样的:

返回结果可以用于缓存的最长时间,单位是秒。在Firefox中,上限是24小时 (即86400秒),而在Chromium 中则是10分钟(即600秒)。Chromium 同时规定了一个默认值 5 秒。
如果值为 -1,则表示禁用缓存,每一次请求都需要提供预检请求,即用OPTIONS请求进行检测。

来自:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/Access-Control-Max-Age 

 

有个需要注意的地方,调试的时候如果开启了 disable cache 则是无法缓存的,

 

标签: ajax 跨域
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 1
博文 70
码字总数 19578
×
dubox
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: