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

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设置和我的阵营Axios公司代码试图做出与传递到头部对象设置了一个param服务器发送一个请求，但仍然在预先回应错误。

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