预检请求（preflight request）

我们先看看什么是预检请求：

A CORS preflight request is a CORS request that checks to see if the CORS protocol is understood.

It is an OPTIONS request, using three HTTP request headers: Access-Control-Request-Method, Access-Control-Request-Headers, and the Origin header.

A preflight request is automatically issued by a browser, when needed. In normal cases, front-end developers don't need to craft such requests themselves.

For example, a client might be asking a server if it would allow a DELETE request, before sending a DELETE request, by using a preflight request:

OPTIONS /resource/foo 
Access-Control-Request-Method: DELETE 
Access-Control-Request-Headers: origin, x-requested-with
Origin: https://foo.bar.org

If the server allows it, then it will respond to the preflight request with a Access-Control-Allow-Methods response header, which lists DELETE:

HTTP/1.1 200 OK
Content-Length: 0
Connection: keep-alive
Access-Control-Allow-Origin: https://foo.bar.org
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Max-Age: 86400

简单的来说就是，就是判断CORS的协议是否被server端理解。

1）如果被理解，就是先发送一个OPTIONS请求。请求头需包含以下三个字段

Access-Control-Request-Method, Access-Control-Request-Headers, and the Origin header.

2）浏览器自动发出，不需要自己发出。

看完了，是不是一脸萌币，什么叫被服务器理解。那么服务器又能理解哪些东西：

预先定义好的简单请求头。包含以下东西。

A simple header (or CORS-safelisted request header) is one of the following HTTP headers:

Accept,
Accept-Language,
Content-Language,
Content-Type with a MIME type of its parsed value (ignoring parameters) of either application/x-www-form-urlencoded, multipart/form-data, or text/plain.

Or one of these client hint headers:

When containing only simple headers, a requests is deemed simple and doesn't need to send a preflight request in the context of CORS.

最后一句话，如果是上面的请求头，就被视为一个简单的请求，并不需要发预检请求。也就是说OPTIONS请求不会发出。

现在情况明朗了。如果你使用自定义的请求头，server自然无法理解。就需要发出OPTIONS请求。

下面给出一个例子：

客户端：

      let promise = new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest(),
            url = "http://localhost:3000/data";
        xhr.onreadystatechange = () => {
          if(xhr.readyState === 4) {
            if(xhr.status === 200) {
              resolve(JSON.parse(xhr.responseText));
            } else {
              reject();
            }
          }
        }
        xhr.open("GET", url);
        xhr.setRequestHeader("x-token", "I am x-token"); // 包含自定义请求头，服务器需要设置Access-Control-Allow-Headers
        xhr.send(null); // 会发出预检请求。也就是OPTIONS请求
      }); 
      promise.then((data) => {
        console.log(data);
      });

服务端

var express = require("express"),
  app = express();

app.use((req, res, next) => {
  res.set("Access-Control-Allow-Origin", "http://localhost:8080");
  res.set("Access-Control-Allow-Headers", "x-token"); // 需要对客户端进行同步设置
  next();
});

app.all("/message", (req, res) => {
  res.json({
    fruitList: ["apple", "banana", "coconut", "watermelon"]
  });
});

app.all("/data", (req, res) => {
  console.log(req.get("x-token"));
  res.json({
    name: "pizza",
    size: "medium"
  });
});

app.listen(3000, () => {
  console.log("server is running");
});