NodeJS + ExpressJS：プリフライトレスポンスでAccess Control-Allow-Headersで要求ヘッダーフィールドを使用できません

Question

現在、NodeJS + ExpressJSはクライアント/サーバーとして、バックエンドサーバーへのAPIリクエストを作成しています。私はAPIリクエストを行うと、私は次のエラーを取得：

Request header field firstname is not allowed by Access-Control-Allow-Headers in preflight response.

を私はCORSを許可するすべてのものを試してみましたが、私はまだ同じエラーを取得しています。

問題になる可能性があり何

var express = require('express'); 
 
    var cors = require('cors'); 
 
    var path = require('path'); 
 
    var config = require('../webpack.config.js'); 
 
    var webpack = require('webpack'); 
 
    var webpackDevMiddleware = require('webpack-dev-middleware'); 
 
    var webpackHotMiddleware = require('webpack-hot-middleware'); 
 
    var app = express(); 
 
    var compiler = webpack(config); 
 
    
 
    app.use(cors()); 
 
    
 
    app.use(webpackDevMiddleware(compiler, {noInfo: true, publicPath: config.output.publicPath})); 
 
    
 
    app.use(webpackHotMiddleware(compiler)); 
 
    
 
    app.use(express.static('./dist')); 
 
    
 
    app.use('/', function (req, res) { 
 
     res.header("Access-Control-Allow-Origin", "*"); 
 
     res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); 
 
     res.sendFile(path.resolve('client/index.html')) 
 
    }) 
 
    
 
    var port = 3000; 
 
    
 
    app.listen(port, function(error) { 
 
     if (error) throw error; 
 
     console.log("Express server listening on port", port); 
 
    });

：ここExpressJSクライアント - サーバーは次のように設定されているどのように私のNodeJS +でしょうか？現在有効な唯一の方法は、https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=enをダウンロードして有効にすることです。エラーが発生せず、APIリクエストが成功するでしょう。

EDIT - どのように私はAPIリクエスト

logInUser(userCredentials) { 

    var userCredsBody = { 
     'firstname': `${userCredentials.username}`, 
     'password': `${userCredentials.password}` 
    } 

    var configuration = { 
     method: 'POST', 
     headers: { 
     'Content-Type': 'application/json' 
     }, 
     body: JSON.stringify(userCredsBody) 
    } 

    return function(dispatch) { 
     fetch('https://serverapi.com:8080/userInfo', configuration) 
     .then(response => response.json()) 
     .then(response => { 
     console.log('Successful and ', response) 
     }) 
     .catch((error) => { 
     console.log("Error: ", error) 
     }) 
    } 

Answer 1

変更ヘッダの順序を作っています。

使用このような何か：

var express = require('express'); 
//This is not longer required, unless you want to disable CORS 
//var cors = require('cors'); 
var path = require('path'); 
var bodyParser = require('body-parser'); 
var config = require('../webpack.config.js'); 
var webpack = require('webpack'); 
var webpackDevMiddleware = require('webpack-dev-middleware'); 
var webpackHotMiddleware = require('webpack-hot-middleware'); 
var app = express(); 
var compiler = webpack(config); 
//The same, no longer required 
//app.use(cors()); 

app.use(webpackDevMiddleware(compiler, {noInfo: true, publicPath: config.output.publicPath})); 

app.use(webpackHotMiddleware(compiler)); 

app.use(express.static('./dist')); 
//Add bodyParser to parse all body as JSON 
app.use(bodyParser.json()); 
app.use(bodyParser.urlencoded({extended: true})); 

function setupCORS(req, res, next) { 
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS'); 
    res.header('Access-Control-Allow-Headers', 'X-Requested-With, Content-type,Accept,X-Access-Token,X-Key'); 
    res.header('Access-Control-Allow-Origin', '*'); 
    if (req.method === 'OPTIONS') { 
     res.status(200).end(); 
    } else { 
     next(); 
    } 
} 
app.all('/*', setupCORS); 

app.use('/', function (req, res) { 
    res.sendFile(path.resolve('client/index.html')) 
}); 

var port = 3000; 

app.listen(port, function(error) { 
    if (error) throw error; 
    console.log("Express server listening on port", port); 
}); 

今、あなたはそれぞれの要求にCORSを設定するミドルウェアを持っています。

あなたはCORSを有効/無効にしたい場合は、単一ルート上に、おそらくあなたは、あなたがCORS構成でセットアップしたいルートだけに

app.all('/*', setupCORS); 

を変更する必要があります。

は私が答えとupvoteを受け入れる前に、 body-parser middleware.