节点 JS - CORS 对预检请求的响应未通过访问控制检查:“Access-Control-Allow-Origin”标头的值
Posted
技术标签:
【中文标题】节点 JS - CORS 对预检请求的响应未通过访问控制检查:“Access-Control-Allow-Origin”标头的值【英文标题】:Node JS - CORS Issue Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header 【发布时间】:2017-11-27 21:54:36 【问题描述】:我的 Angular 2 网络应用出现问题。
在 Node JS 服务器端,我遇到了 CORS 预检问题。
我想在服务器上上传一个文件,当我这样做时,我遇到了这个问题:
XMLHttpRequest 无法加载 http://localhost:4000/upload。对预检请求的响应未通过访问控制检查:当请求的凭据模式为“包含”时,响应中的“Access-Control-Allow-Origin”标头的值不得为通配符“*”。因此,Origin 'http://localhost:3000' 不允许访问。 XMLHttpRequest 发起的请求的凭证模式由 withCredentials 属性控制。
其中 localhost:4000 是我的服务器,localhost:3000 是我的客户端。
我的 server.js 文件是这样的:
require('rootpath')();
var express = require('express');
var app = express();
var cors = require('cors');
var bodyParser = require('body-parser');
var expressJwt = require('express-jwt');
var config = require('config.json');
var multer = require('multer');
app.use(cors());
app.use(bodyParser.urlencoded( extended: false ));
app.use(bodyParser.json());
// // use JWT auth to secure the api
app.use(expressJwt( secret: config.secret ).unless( path: ['/users/authenticate', '/users/register'] ));
// // routes
app.use('/users', require('./controllers/users.controller'));
app.use('/challenges', require('./controllers/challenges.controller'));
// NEW UPLOAD
app.use(function(req, res, next) //allow cross origin requests
res.setHeader("Access-Control-Allow-Methods", "POST, PUT, OPTIONS, DELETE, GET");
res.header("Access-Control-Allow-Origin", "http://localhost:3000");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
res.header("Access-Control-Allow-Credentials", true);
next();
);
/** Serving from the same express Server
No cors required */
app.use(express.static('../client'));
app.use(bodyParser.json());
var storage = multer.diskStorage( //multers disk storage settings
destination: function (req, file, cb)
cb(null, './uploads/');
,
filename: function (req, file, cb)
var datetimestamp = Date.now();
cb(null, file.fieldname + '-' + datetimestamp + '.' + file.originalname.split('.')[file.originalname.split('.').length -1]);
);
var upload = multer( //multer settings
storage: storage
).single('file');
/** API path that will upload the files */
app.post('/upload', function(req, res)
upload(req,res,function(err)
console.log(req.file);
if(err)
res.json(error_code:1,err_desc:err);
return;
res.json(error_code:0,err_desc:null);
);
);
// FIN NEW UPLOAD
// start server
var port = process.env.NODE_ENV === 'production' ? 80 : 4000;
var server = app.listen(port, function ()
console.log('Server listening on port ' + port);
);
最奇怪的是,当我删除以下部分时,上传工作正常:
app.use(cors());
app.use(bodyParser.urlencoded( extended: false ));
app.use(bodyParser.json());
// // use JWT auth to secure the api
app.use(expressJwt( secret: config.secret ).unless( path: ['/users/authenticate', '/users/register'] ));
// // routes
app.use('/users', require('./controllers/users.controller'));
app.use('/challenges', require('./controllers/challenges.controller'));
然后,我遇到了其他问题:
(由于声誉,我没有在 localhost 之前包含 http 前缀)
1) zone.js:2019 OPTIONS localhost:4000/users 404(未找到)
2) XMLHttpRequest 无法加载 localhost:4000/users。预检响应包含无效的 HTTP 状态代码 404
3) 例外:响应状态:0 对于 URL:null
4) 未捕获响应 _body: ProgressEvent, status: 0, ok: false, statusText: "", headers: Headers...
我认为我们必须修复第一个示例中的 cors() 部分,但我不知道该怎么做。
谢谢
更新:用您的代码修改后,我正在运行一个新问题:
XMLHttpRequest 无法加载 localhost:4000/users。预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段授权
当我尝试上传我的文件时,我遇到了一个新问题:
POST localhost:4000/上传 401(未授权)
我尝试在一个数组中添加许多来源,而不仅仅是 localhost:3000,但没有任何变化。
其他:如果我将“Origin”、“Content-Type”、“Accept”添加到标题列表中,则会出现以下错误:
OPTIONS localhost:4000/users net::ERR_CONNECTION_REFUSED。
我不得不承认 CORS 有点难。
【问题讨论】:
加一我不得不承认CORS有点难。 【参考方案1】:根据 cors 文档 https://github.com/expressjs/cors,要启用 CORS Pre-Flight,您应该添加以下代码:
app.options('*', cors()) // include before other routes
您也可以为特定路线启用它:
app.options('/products/:id', cors()) // enable pre-flight request for DELETE request
app.del('/products/:id', cors(), function (req, res, next)
res.json(msg: 'This is CORS-enabled for all origins!')
)
【讨论】:
以上是关于节点 JS - CORS 对预检请求的响应未通过访问控制检查:“Access-Control-Allow-Origin”标头的值的主要内容,如果未能解决你的问题,请参考以下文章
为啥 CORS 错误“对预检请求的响应未通过访问控制检查”?