請求標頭字段<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();