为什么向 OPTIONS 路由添加 CORS 标头不允许浏览器访问我的 API？

如何解决为什么向 OPTIONS 路由添加 CORS 标头不允许浏览器访问我的 API？

为了回答您的主要问题，如果 POST 或 GET 中包含任何非简单的内容或标题，CORS 规范仅要求 OPTIONS 调用位于 POST 或 GET 之前。

需要 CORS 飞行前请求（OPTIONS 调用）的内容类型是 除以下 内容之外的任何内容类型：

1. application/x-www-form-urlencoded
2. multipart/form-data
3. text/plain

除了上面列出的内容类型之外的任何其他内容类型都将触发飞行前请求。

至于 Headers， 除以下之外的 任何 Request Headers都会触发 pre-flight 请求：

1. Accept
2. Accept-Language
3. Content-Language
4. Content-Type
5. DPR
6. Save-Data
7. Viewport-Width
8. Width

任何其他请求标头都将触发飞行前请求。

因此，您可以添加一个自定义标头，例如：x-Trigger: CORS，这应该会触发飞行前请求并点击 OPTIONS 块。

请参阅MDN Web API 参考 - CORS 预检请求

解决方法

我正在尝试在使用 Express.js Web 框架的 Node.js 应用程序中支持 CORS。我已经阅读了有关如何处理此问题的 Google
小组讨论，并阅读了一些有关 CORS 工作原理的文章。首先，我这样做了（代码是用
CoffeeScript 语法编写的）：

app.options "*",(req,res) ->
  res.header 'Access-Control-Allow-Origin','*'
  res.header 'Access-Control-Allow-Credentials',true
  # try: 'POST,GET,PUT,DELETE,OPTIONS'
  res.header 'Access-Control-Allow-Methods','GET,OPTIONS'
  # try: 'X-Requested-With,X-HTTP-Method-Override,Content-Type,Accept'
  res.header 'Access-Control-Allow-Headers','Content-Type'
  # ...

它似乎不起作用。我的浏览器（Chrome）似乎没有发送初始 OPTIONS 请求。当我刚刚更新资源块时，我需要提交一个跨域 GET 请求到：

app.get "/somethingelse",res) ->
  # ...
  res.header 'Access-Control-Allow-Origin',true
  res.header 'Access-Control-Allow-Methods','POST,OPTIONS'
  res.header 'Access-Control-Allow-Headers','Content-Type'
  # ...

它可以工作（在 Chrome 中）。这也适用于 Safari。

我读过那…

在实现 CORS 的浏览器中，每个跨域 GET 或 POST 请求之前都有一个 OPTIONS 请求，用于检查 GET 或 POST 是否正常。

所以我的主要问题是，为什么在我的情况下似乎没有发生这种情况？为什么我的 app.options 块没有被调用？为什么我需要在我的主 app.get
块中设置标题？