リクエストヘッダーフィールド<field-name>は、プリフライト応答のAccess-Control-Allow-Headersで許可されていません

Question

Mongoデータベースでユーザーを探すためにExpressサーバーにAxiosリクエストを行うReactアプリケーションがあります。以前は、Railsのバックエンドを構築しCORSの宝石を手に入れましたが、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();