中间件设置 cors 标头适用于 app.use() 但不适用于特定路由答案

【问题标题】：middleware setting cors headers works with app.use() but not for specific route中间件设置 cors 标头适用于 app.use() 但不适用于特定路由
【发布时间】：2020-03-15 18:29:37
【问题描述】：

中间件：

const enableCors = (req, res, next) => {
  res.set({
    'Access-Control-Allow-Origin': 'http://127.0.0.1:5500',
    'Access-Control-Allow-Headers': 'content-type'
  });
  next();
};
//this works from postman as well as from browser

当像这样添加app.use(enableCors); 时，上面的中间件工作正常，但我希望它与特定路由一起工作，我使用它如下：

app.post('/resource', enableCors, (req, res, next)=>{
    res.json({msg:'success'});
});
//this only works from postman

我很确定这与飞行前请求的工作方式有关，因为当邮递员提出请求时，无论哪种方式都可以。但是当使用 fetch() 从浏览器请求它时，它只适用于app.use() 这是前端的获取请求：

fetch('http://localhost:3000/resource', {
    method: 'POST',
    headers: {
    'Content-Type': 'application/json'
    },
    body: JSON.stringify({ key:'value' })
})
.then(res => {
    console.log(res);
})
.catch(err => {
    console.log('something went wrong', err);
    });

当从浏览器请求时，是什么阻止它使用特定路由？

【问题讨论】：

您使用POST 方法获取，但您在服务器上侦听GET。
在 chrome 浏览器的网络选项卡中查看来自浏览器的请求。准确查看浏览器从您的服务器发送和返回的内容。您可能触发了 OPTIONS 飞行前请求并且您的 app.use() 处理了该请求，但您的 app.get() 显然只处理 GET 请求，而不是 OPTIONS 请求。如有疑问，请查看网络标签，看看到底发生了什么。
这一切都适用于邮递员，因为邮递员没有 CORS 限制。那是浏览器实现的东西。但是，您的问题确实令人困惑，因为您显示了一个 POST 请求和一个仅用于 GET 请求的 app.get() 处理程序。
@jfriend00 已编辑问题，但 app.get() 仅在此处不在运行代码中。
那么，您是否查看了网络选项卡并查看发生了什么？我们无法为您做到这一点。

标签： node.js express cors fetch middleware

【解决方案1】：

CORS 在浏览器发送选项标头时起作用，因此，尝试添加一个新路由器，例如：

app.options('/resource', enableCors, (req, res) => res.send());

Postman 不受 CORS 影响，因为它不是浏览器。

【讨论】：

效果很好。我添加了app.options(enableCors); 并保留了旧的post()，没有任何中间件。这是一个合理的问题。我不知道为什么它被否决了。