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

Question

我有一个 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)
    })
  }
}

Answer 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();