CORS跨域时，为何会出现一次动作，两次请求？

在开发前后端分离项目时候，我们总会面临一个跨域问题。

众所周知，在以前，跨域可以采用代理、JSONP等方式，而在现代浏览器面前，我们有了更好的选择， CORS 。

我们可以通过服务器端设置 Access-Control-Allow-Origin 响应头，即可使指定来源像访问同源接口一样访问跨域接口。

在使用 CORS 的时候，后台采用 token 检验机制，前台发送请求必须将 token 放到 Request Header 中,那么就需要传输自定义 Header 信息，这时候细心的你一定会发现一个问题，在前端ajax请求数据的时候，有时候会向后台一次性发送两次请求，这两次请求第一次无返回数据，第二次才会返回正确数据。像下图这个样子，莫名多出了一个 OPTIONS 的请求：

不用怀疑，这不是你的代码有bug,也不是在请求函数中重复调用了请求，因为很明显，两次的 Request Method 是不一样的。

如果你也曾因这个问题，困惑过，迷茫过，不知所因。那么关于这个问题，我将为你给出答案！

对于 CORS 跨域，有两种不同的请求类型。

• 简单跨域请求
• 复杂跨域请求(带预检的跨域请求)。

简单跨域请求

简单跨域请求是指满足以下两个条件的请求。 1、HTTP方法是以下三种方法之一：

HEAD
GET
POST

2、HTTP的头信息不超出以下几种字段：

Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type

简单跨域请求的部分响应头如下：

• Access-Control-Allow-Origin （必含）- 不可省略，否则请求按失败处理。该项控制数据的可见范围，如果希望数据对任何人都可见，可以填写"*"。

• Access-Control-Allow-Credentials （可选） – 该项标志着请求当中是否包含 cookies 信息，只有一个可选值：true（必为小写）。如果不包含 cookies ，请略去该项，而不是填写false。这一项与 XmlHttpRequest2 对象当中的 withCredentials 属性应保持一致，即 withCredentials 为true时该项也为true； withCredentials 为false时，省略该项不写。反之则导致请求失败。

• Access-Control-Expose-Headers （可选） – 该项确定 XmlHttpRequest2 对象当中 getResponseHeader() 方法所能获得的额外信息。通常情况下， getResponseHeader() 方法只能获得如下的信息：

  • Cache-Control
  • Content-Language
  • Content-Type
  • Expires
  • Last-Modified
  • Pragma

  当你需要访问额外的信息时，就需要在这一项当中填写并以逗号进行分隔。

复杂跨域请求

任何一个不满足简单跨域请求要求的请求，即被认为是复杂请求，也称作带预检的跨域请求。

一个复杂请求不止发送一个包含通信内容的请求，其中最先发送的是一种**"预检"请求**，此时作为服务端，也需要返回**"预回应"**作为响应。"预检"请求实际上是对服务端的一种权限请求，只有当"预检"请求成功返回，实际请求才开始执行。

预请求以 OPTIONS 形式发送，当中同样包含域，并且还包含了两项 CORS 特有的内容：

Access-Control-Request-Method
Access-Control-Request-Headers

显而易见，这个"预检"请求实际上就是在为之后的实际请求发送一个权限请求，在预回应返回的内容当中，服务端应当对这两项进行回复，以让浏览器确定请求是否能够成功完成。一旦预回应如期而至，所请求的权限也都已满足，才会发出真实请求，携带真实数据。