乐趣区

关于后端:测试大姐提了个bug为什么你多了个options请求

jiezi

1 上班前的沉寂

刚筹备上班呢，测试大姐又给我提个 bug，你看我这就操作了一次，network 里咋有两个申请？

我心一惊，”不可能啊！我代码明明就调用一次后端接口，咋可能两个申请！“。关上她的截图一看：多个 options 申请。

我镇定自若解释道：”这不必管，是浏览器默认发送的一个预检申请“。

可测试大姐如同仍旧很执着：“那这可必定不行啊，明明一次申请，干嘛要两次呢，这不是增大服务端压力吗？”

“md，真执著啊，那就不上班了，加个钟给你讲懂！”

HTTP 申请分为两种：

  • 简略申请
  • 非简略申请

2 简略申请

2.1 条件

  • 申请形式：HEAD、GET、POST

  • header 中只能蕴含以下申请头字段：

    • Accept
    • Accept-Language
    • Content-Language

    • Content-Type 所指的媒体类型值仅仅限于下列三者之一

      • text/plain
      • multipart/form-data
      • application/x-www-form-urlencoded

2.2 浏览器的不同解决形式

简略申请，若申请跨域，浏览器会放行让申请收回。浏览器会发 cors 申请，并携带 origin。此时不论服务端返回啥，浏览器都会把返回拦挡，并查看返回的response 的header中有无Access-Control-Allow-Origin：

  • 这头部信息的值通常为申请的 Origin 值，示意容许该起源的申请阐明资源是共享的，能够拿到
  • 如果 Origin 头部信息的值为 ”*”（示意容许来自任何起源的申请）但这种状况下须要审慎应用，因为它存在安全隐患
  • 如没有这个头信息，阐明服务端没有开启资源共享，浏览器会认为这次申请失败终止这次申请，并且报错。

3 非简略申请

只有不满足简略申请的条件，都是非简略申请。

收回非简略 cors 申请，浏览器会做一个 http 的查问申请（预检申请）即 options。options 申请会依照简略申请来解决。

为啥要做一次 options 申请？

查看服务器是否反对跨域申请，并确认理论申请的 安全性 。预检申请是为爱护客户端的平安，避免不受信赖网站利用用户浏览器向其余网站发歹意申请。预检申请头中除了携带了origin 字段还蕴含两个非凡字段：

  • Access-Control-Request-Method：告知服务器理论申请应用的 HTTP 办法
  • Access-Control-Request-Headers：告知服务器理论申请所携带的自定义首部字段

如：

OPTIONS /resources/post-here/ HTTP/1.1
Host: bar.other
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Origin: http://foo.example
Access-Control-Request-Method: POST
Access-Control-Request-Headers: X-PINGOTHER, Content-Type

以上报文中就能够看到，应用 OPTIONS 申请，浏览器依据下面的应用的申请参数来决定是否须要发送，这样服务器就能够回应是否能够承受用理论的申请参数来发送申请。

–Access-Control-Request-Method告知服务器，理论申请将应用 POST 办法

Access-Control-Request-Headers告知服务器，理论申请将携带两个自定义申请标头字段：X-PINGOTHER 与 Content-Type。服务器据此决定，该理论申请是否被容许。

啥时触发预检申请？

  1. 发送跨域申请时，申请头中蕴含了一些非简略申请的头信息，如自定义头（custom header）
  2. 发送跨域申请时，应用了 PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH 等申请办法

“大姐你听懂了吗？所以这不是 bug，连忙把它关掉吧！”

大姐漏出了澄澈的眼光，好吧

4 上案例

这下测试大姐终于将信将疑地敞开了 Bug。

5 如果世上没有测试大姐

我说如果啊！你的测试老大姐就是说：我不懂你说的这些，我不论，反正我当初想看到的是在浏览器外面只有一次网络申请，你本人看着办吧，bug 我留在这了，你本人解决！

爱！浏览器厂商为了保障安全性，禁止了跨域，可最终还是程序员接受了所有优化的代价！

本文由博客一文多发平台 OpenWrite 公布！

退出移动版