为什么浏览器发送一个选项请求，即使我的前端代码只是发出一个POST请求？

Question

我的前端代码：

<form action="" onSubmit={this.search}>
  <input type="search" ref={(input) => { this.searchInput = input; }}/>
  <button type="submit">搜索</button>
</form>

// search method:
const baseUrl = 'http://localhost:8000/'; // where the Express server runs
search(e) {
  e.preventDefault();
  let keyword = this.searchInput.value;
  if (keyword !== this.state.lastKeyword) {
    this.setState({
      lastKeyword: keyword
    });
    fetch(`${baseUrl}search`, {
      method: 'POST',
      // mode: 'no-cors',
      headers: new Headers({
      'Content-Type': 'application/json'
      }),
      // credentials: 'include',
      body: JSON.stringify({keyword})
    })
  }
}

和我的Express.js服务器代码：

app.all('*', (req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header('Access-Control-Allow-Methods', 'POST, GET, OPTIONS');
  res.header('Access-Control-Allow-Headers', 'Content-Type');
  // res.header('Access-Control-Allow-Credentials', true);
  res.header('Content-Type', 'application/json; charset=utf-8')
  next();
});

如您所见，Express服务器在端口8000上运行，React开发服务器在端口3000上运行。localhost:3000正在请求localhost:8000/search，并且localhost:8000正在通过使用POST方法请求另一个源。但是，只有第二个请求工作得很好。我不知道怎么会这样。当然，如果我用querystring发出GET请求，事情就正常了。但我也想知道如何用请求正文进行POST获取。

Answer 1

该options请求由浏览器自行自动发送，然后再从代码中尝试post请求。这叫做CORS预飞行。

https://developer.mozilla.org/en-美国/docs/web/http/cors#preflighted_requests有详细信息。

在本例中，它的要点是代码添加的content-type:application/json请求头触发浏览器执行预飞行options请求。

npm install cors

var express = require('express')
  , cors = require('cors')
  , app = express();
const corsOptions = {
  origin: true,
  credentials: true
}
app.options('*', cors(corsOptions)); // preflight OPTIONS; put before other routes
app.listen(80, function(){
  console.log('CORS-enabled web server listening on port 80');
});

它将处理options请求，同时还会发回正确的头和值。