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.

My 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

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

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

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

1 个答案: