![](/img/trans.png)
[英]Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers in preflight response
[英]NodeJS + ExpressJS: Request header field not allowed by Access-Control-Allow-Headers in preflight response
我目前有一个 NodeJS + ExpressJS 作为客户端服务器,向后端服务器发出 API 请求。 当我发出 API 请求时,我收到以下错误:
Request header field firstname is not allowed by Access-Control-Allow-Headers in preflight response.
我尝试了所有允许 CORS 的方法,但仍然遇到相同的错误。 这是我的 NodeJS + ExpressJS 客户端-服务器的设置方式:
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); });
可能是什么问题? 目前唯一有效的方法是下载https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en并启用它,然后我就不会收到错误和 API 请求会成功。
编辑 - 我如何提出 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)
})
}
更改标题顺序。
使用这样的东西:
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,在单个路由上,也许您需要更改
app.all('/*', setupCORS);
仅到要使用 CORS 配置设置的路由。
我添加了一个body-parser 中间件。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.