我在我的Angular 2网页应用程序中遇到了问题。
在Node JS服务器端，我遇到了CORS预检问题。
我想要在服务器上上传文件，但当我这样做时，出现了以下问题：
XMLHttpRequest无法加载http://localhost:4000/upload。预检请求的响应未能通过访问控制检查：当请求的凭据模式为“包括”时，“Access-Control-Allow-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'));
但是，我遇到了其他问题：
（由于声誉原因，我没有在本地主机之前包含http前缀）
1）zone.js：2019 OPTIONS localhost：4000 / users 404（未找到）
2）XMLHttpRequest无法加载localhost:4000/users。 预检的响应具有无效的HTTP状态代码404
3）EXCEPTION：URL为null的状态的响应：0
4）未捕获的响应{_body：ProgressEvent，status：0，ok：false，statusText：“”，headers：Headers…}
我认为我们必须在第一个示例中修复cors（）部分，但我不知道该怎么做。
谢谢
更新：在使用您的代码进行修改后，我遇到了新问题：
XMLHttpRequest无法加载localhost：4000 / users。预检请求中Access-Control-Allow-Headers不允许请求标头字段Authorization
当我尝试上传文件时，我遇到了新问题：
POST localhost：4000 / upload 401（未经授权）
我尝试在数组中添加许多来源，而不仅仅是localhost：3000，但并没有改变任何东西。
还有其他事情：如果我将“ Origin”，“ Content-Type”，“ Accept”添加到标题列表中，则会出现以下错误：
OPTIONS localhost：4000 / users net :: ERR_CONNECTION_REFUSED。
我得承认，CORS有点困难。