options请求

大家关注到没，在时候开发项目的过程中发送ajax网络请求有时候会有一个option的请求，让我们看起来感觉是请求了两次，刚开始没当回事，今天我们就来剖析一下这个option请求是干嘛的？

说这个之前我们先了解一下CORS(cross-origin sharing standard)–跨域资源共享标准。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

CORS需要浏览器和服务器同时支持，整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

options请求的由来

CORS新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权访问哪些资源，规范要求对那些可能对服务器数据产生副作用的HTTP请求方法，浏览器必须先使用OPTIONS方法发起一个预检请求。从而获取服务端是否允许该跨域请求。等到服务器允许之后才会发起真正的HTTP请求，在预检请求response中服务端也会通知是否要携带身份凭证(包括 Cookies 和 HTTP 认证相关数据)

我们将请求可以分为三个场景，简单请求，预检请求，附带身份凭证请求。

浏览器将CORS请求分成两类：简单请求，非简单请求。

下面我们来看哪些是简单请求：

• 使用get，head，post方法
• 除了被用户代理自动设置的首部字段（例如 Connection ，User-Agent）和在 Fetch 规范中定义为 禁用首部名称 的其他首部，允许人为设置的字段为 Fetch 规范定义的 对 CORS 安全的首部字段集合。该集合为：
  • Accept
  • Accept-Language
  • Content-Language
  • Content-Type （需要注意额外的限制）
  • DPR
  • Downlink
  • Save-Data
  • Viewport-Width
  • Width
• Content-Type的值是text/plain，multipart/form-data，application/x-www-form-urlencoded的
• 请求中的任意XMLHttpRequestUpload 对象均没有注册任何事件监听器；XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问。
• 请求中没有使用 ReadableStream 对象。

浏览器处理简单请求和非简单请求的方式是不一样的。

简单请求

浏览器直接发出CORS请求，在头信息中增加一个Origin字段,说明本次请求的来源。服务器根据这个值决定是否同意这次请求。如果服务器返回的信息中没有包含Access-Control-Allow-Origin，浏览器就会抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。

如果返回的有Access-Control-Allow-Origin这些字段，说明请求的origin是在许可范围内。

• Access-Control-Allow-Origin：必须，对应的只是请求的Origin字段，或者是一个*，表示接受任意域名请求
• Access-Control-Allow-Credentials：可选，值是一个布尔值，默认情况下为true.表示允许发送Cookie，
• Access-Control-Expose-Headers：可选

非简单请求

非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。

非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求(options),浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

预检请求中有两个需要注意的特殊字段：

• Access-Control-Request-Method：列出请求会用到哪些请求方式，
• Access-Control-Request-Headers：指定浏览器CORS请求额外发送的头信息字段。

通过上面的概述我们知道有options预处理的操作，这样会造成两次请求，这种预处理的方式有好有坏，我们可以使用下面的方式避免预检请求：

• 最简单的办法就是按照上面的方法来开发，不低服务器产生副作用，但是很明显这不是个好办法。我们经常会操作自定义header头部。
• 设置Access-Control-Max-Age来指定某次预检请求的有效期，单位是：秒，有多种方法设置：推荐在nginx上直接设置Access-Control-Max-Age，可以设置时间长一点。

location / {
    add_header 'Access-Control-Max-Age' 604800 ;
}