预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 <field-name>

Posted 2023-02-22

【中文标题】预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 <field-name>

【英文标题】：Request header field <field-name> is not allowed by Access-Control-Allow-Headers in preflight response

【发布时间】：2017-10-30 05:47:17

【问题描述】：

我有一个 React 应用程序正在尝试向我的 Express 服务器发出 axios 请求以在 Mongo 数据库中查找用户。之前，我在 Rails 上构建了后端，并且有一个用于 CORS 的 gem，在尝试在 Express 端配置 CORS 之后，我似乎找不到解决方案。我希望能够在标题中传递一个自定义字段（即用户名），以便我可以使用该字段来查询我的数据库。

我在浏览器中遇到错误：

XMLHttpRequest cannot load http://localhost:3000/api/users/test. 
Request header field username is not allowed by Access-Control-Allow-Headers 
in preflight response.

我的 Express 服务器设置了以下 CORS，并且我的 React axios 代码尝试使用传递给标头对象的参数向服务器发出请求，但仍然收到预检响应错误。

app.use(function(req, res, next) 
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Credentials', 'true');
  res.setHeader('Access-Control-Allow-Methods', 'GET,HEAD,OPTIONS,POST,PUT,DELETE');
  res.setHeader("Access-Control-Allow-Headers",
    "Access-Control-Allow-Headers, 
    Origin, 
    Accept, 
    X-Requested-With, 
    Content-Type, 
    Access-Control-Request-Method, 
    Access-Control-Request-Headers, 
    Authorization")
  res.setHeader('Cache-Control', 'no-cache');
  next();
);

export const loadAccount = (username) => 
  return(dispatch) => 
    axios
    .get(`$url/users/test`, 
      headers: username: username
    )
    .then(resp => 
      dispatch(
        type: 'LOAD_ACCOUNT',
        account: resp.data
      )
    )
    .catch(errors => 
      console.log(errors)
    )
  

【问题讨论】：

请使用***.com/posts/44250594/edit 编辑/更新您的问题并粘贴您在浏览器开发工具控制台中看到的确切错误消息

【参考方案1】：

在我看来，您必须在 Access-Control-Allow-Headers 子句中添加 username 作为有效标题，即：

res.setHeader("Access-Control-Allow-Headers",
  "Access-Control-Allow-Headers, 
  Origin, 
  Accept, 
  X-Requested-With, 
  Content-Type, 
  Access-Control-Request-Method, 
  Access-Control-Request-Headers, 
  Authorization,
  username")
res.setHeader('Cache-Control', 'no-cache');
next();

【讨论】：

成功了！我确实想知道，在我的项目变得足够大并且我需要将许多自定义标题传递给 Headers 子句的情况下，该子句可能会变大。是否有可以在子句中声明的解决方法或包罗万象的方法来捕获任何/所有自定义标头？

你应该可以只使用* 或完全删除标题，我相信默认是允许任何东西，但我不是 100% 确定