如何在 CORS 中间件中读取自定义标头答案

【问题标题】：How to read custom header in CORS middleware如何在 CORS 中间件中读取自定义标头
【发布时间】：2020-08-19 00:07:44
【问题描述】：

我使用 CORS 包创建了 CORS 中间件。这个中间件将在每次调用之前被调用。这是我的实现。

const corsMiddleware = async (req, callback) => {
  const { userid } = req.headers|| req.cookies {};
  let whiteList = await getWhiteListDomains(userid)
  return callback(null, {
    origin: whiteList,
    credentials: true,
    allowedHeaders: ["userid", "authorization", "content-type"]
  });
};

并在路由初始化之前添加了这个中间件

app.use(cors(corsMiddleware));
app.options("*", cors(corsMiddleware));



app.get("/user", (req, res, next)=>{
    // code
})

在浏览器中我尝试将 API 调用为

axios({ method: "get", url: "http://localhost:3000/user", headers: {userId:"1234"} });

在服务器上调试时我看到了

access-control-request-headers:"userid"

在请求对象的标头中。

我无法读取自定义标题。这可能是因为我试图在 CORS 初始化之前读取自定义标头。但是，我仍然想阅读那个自定义标题。

【问题讨论】：

您到底想读取什么请求标头？
@sideshowbarker 我在标题中传递了用户 ID。现在我想在 cors 中间件中读取该标题。
目前写的问题不清楚，并且缺少任何人都必须回答的细节。您应该更新问题以包含有关您正在测试的硬件的解释。您是否从浏览器中运行的前端 JavaScript 代码发送请求？如果是这样，该代码是什么样的？你检查过浏览器开发工具控制台吗？浏览器在那里记录的确切消息是什么？
@sideshowbarker 我已经更新了这个问题。请看这个可以帮助你理解
浏览器在 devtools 控制台中记录的确切消息是什么？

标签： javascript node.js express cors

【解决方案1】：

您的代码主要有两个问题。

第一个，更容易解决的是，您在设置Access-Control-Allow-Headers 的选项中缺少access-control-allow-origin：

return callback(null, {
  origin: whiteList,
  credentials: true,
  allowedHeaders: [
    "access-control-allow-origin",
    "authorization",
    "content-type",
    "userid"
  ]
});

第二个是最重要的，因为它与 CORS 的工作方式有关。您遇到的这个问题是 CORS 已经在飞行前OPTIONS 请求中拒绝了请愿书。它从不允许浏览器执行GET 请求。

您说您想在飞行前OPTIONS 请求中读取自定义标头userId，但您不能。原因是预检 OPTIONS 请求是由浏览器自动创建的，它不会使用您在 Axios 调用中设置的自定义标头。它只会为 CORS 发送 these headers：

Origin // URL that makes the request
Access-Control-Request-Method // Method of the request is going to be executed 
Access-Control-Request-Headers // Headers allowed in the request to be executed

因为您的自定义标头没有被发送，所以在飞行前OPTIONS 当您尝试访问userId 的值时，您会得到一个undefined 值：

const { userid } = req.headers|| req.cookies;
console.log(userid); // undefined

并且因为您使用的值在异步函数 getWhiteListDomains 中不匹配，可能会得到另一个 undefined，所以在 CORS 中间件的 origin 选项中设置的值是 undefined，它会引发 CORS中间件拒绝 pre-flight OPTIONS 请求。

let whiteList = await getWhiteListDomains(userid); // userid === undefined
console.log(whitelist); // undefined
return callback(null, {
  origin: whiteList, // undefined
  credentials: true,
  allowedHeaders: ["userid", "authorization", "content-type"]
});

我不完全确定您尝试使用自定义标头作为 CORS 检查的目标是什么，但我的建议是在处理自定义 CORS 配置时只检查 Origin 标头，因为这是它的目的：to limit and control which URLs can access to your server and resources。

如果您有兴趣在服务器收到的请求中创建任何类型的授权或受限于用户实现，我建议您使用不同的自定义中间件，并且像现在尝试的那样完全不涉及 CORS。

【讨论】：

【解决方案2】：

你必须解析你的请求

试试这个 npm i body-parser

和

const bodyParser = require('body-parser');
app.use(bodyParser.json())

【讨论】：