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

问题描述

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

I am trying to support CORS in my Node.js application that uses the Express.js web framework. I have read a Google group discussion about how to handle this, and read a few articles about how CORS works. First, I did this (code is written in CoffeeScript syntax):

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 请求:

It doesn't seem to work. It seems like my browser (Chrome) is not sending the initial OPTIONS request. When I just updated the block for the resource I need to submit a cross-origin GET request to:

app.get "/somethingelse", (req, res) ->
  # ...
  res.header 'Access-Control-Allow-Origin', '*'
  res.header 'Access-Control-Allow-Credentials', true
  res.header 'Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, OPTIONS'
  res.header 'Access-Control-Allow-Headers', 'Content-Type'
  # ...

它可以工作(在 Chrome 中).这也适用于 Safari.

It works (in Chrome). This also works in Safari.

我已经读过了……

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

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

So my main question is, how come this doesn't seem to happen in my case? Why isn't my app.options block called? Why do I need to set the headers in my main app.get block?

推荐答案

为了回答您的主要问题，CORS 规范仅要求 OPTIONS 调用位于 POST 或 GET 之前，前提是 POST 或 GET 有任何非简单的内容或标题在里面.

To answer your main question, the CORS spec only requires the OPTIONS call to precede the POST or GET if the POST or GET has any non-simple content or headers in it.

需要 CORS 飞行前请求(OPTIONS 调用)的内容类型是任何内容类型除了以下内容:

Content-Types that require a CORS pre-flight request (the OPTIONS call) are any Content-Type except the following:

1. application/x-www-form-urlencoded
2. multipart/form-data
3. 文本/纯文本

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

Any other Content-Types apart from those listed above will trigger a pre-flight request.

至于标头，任何请求标头除了以下将触发飞行前请求:

As for Headers, any Request Headers apart from the following will trigger a pre-flight request:

1. 接受
2. 接受语言
3. 内容语言
4. 内容类型
5. DPR
6. 保存数据
7. 视口宽度
8. 宽度

任何其他请求标头都会触发飞行前请求.

Any other Request Headers will trigger the pre-flight request.

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

So, you could add a custom header such as: x-Trigger: CORS, and that should trigger the pre-flight request and hit the OPTIONS block.

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

这篇关于为什么向 OPTIONS 路由添加 CORS 标头不允许浏览器访问我的 API?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！