将 CORS 模块添加到单个快速路线不起作用

Question

如果我enable CORS for all routes，则来自前端 (https://localhost:3000) 的请求有效并获得正确的请求标头。

const express = require('express');
const cors = require('cors');
var app = express();

app.use(cors());

app.post('/api/submitEmail', () => console.log('yay'));

如果我 enable CORS on the individual route，完全按照文档布局，我会在控制台中收到 CORS 错误

app.post('/api/submitEmail', cors(), () => console.log('booooo'));

错误：

Access to XMLHttpRequest at 'http://localhost:8000/api/submitEmail' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我错过了什么？

来自下面前端的整个请求

const api =
  process.env.NODE_ENV === "development"
    ? "http://localhost:8000"
    : MY_PROD_URL;

const user = {
    email
  };

  axios.post(`${api}/api/submitEmail`, { user }).then(res => {
    setIsLoading(false);
    setValidationMessage(res.data);
  });

Answer 1

我遇到了同样的问题，@jfriend00 的回答帮助了我。 您只需要包含 express 应用的初始选项：

app.options('/this_is_your_cors_route', cors())

然后你的 cors 路线将起作用：

app.post('/this_is_your_cors_route', cors(), (req, res) => {});

以下是此问题的文档：https://github.com/expressjs/cors#enabling-cors-pre-flight

Answer 2

您没有向我们展示实际请求的详细信息，但如果请求包含某些特殊条件，则浏览器会在发出 POST 之前尝试使用 OPTIONS 请求对请求进行预检。当您仅在 cors() 路由处理程序中插入 cors() 调用时，不会处理 OPTIONS 请求，并且如果此特定的跨源请求是触发 OPTIONS 预飞行的类型，那么因为您不处理它，请求将失败。

你可以通过添加这个来解决这个问题：

app.options('/api/submitEmail', cors(), (req, res) => res.send());

因为这将处理该特定路线的 OPTIONS 飞行前。

您可以了解什么是“简单请求”here。除了简单请求之外的任何内容都需要 OPTIONS 飞行前。它可以像设置单个自定义标头或简单请求中不允许的内容类型一样简单，这将触发 OPTIONS 预检。

当您执行 app.use(cors()); 时，它会自动为您处理飞行前的 OPTIONS 请求，因为所有 HTTP 动词都被发送到 app.use() 处理程序，并且 cors() 中间件处理程序支持为 OPTIONS 请求做正确的事情。

此外，在您的 POST 请求处理程序中，您需要发送响应，否则客户端只会坐在那里等待响应并最终超时。