Question

我在使用Angular 2网络应用时遇到了问题。

在Node JS服务器端，我遇到了CORS预检的问题。

我想在服务器上传文件，当我这样做时，我遇到了这个问题：

XMLHttpRequest无法加载http://localhost:4000/upload。对预检请求的响应没有通过访问控制检查：＆＃39;访问控制 - 允许 - 来源＆＃39;响应中的标题不能是通配符＆＃39; *＆＃39;当请求的凭据模式为＆＃39; include＆＃39;时。起源＆＃39; http://localhost:3000＆＃39;因此不允许访问。 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（Not Found）

2）XMLHttpRequest无法加载localhost：4000 / users。预检的响应具有无效的HTTP状态代码404

3）EXCEPTION：响应状态：URL为0：null

4）未捕获的响应{_body：ProgressEvent，status：0，ok：false，statusText：＆＃34;＆＃34;，headers：Headers ...}

我认为我们必须在第一个例子中修复cors（）部分，但我不知道该怎么做。

由于

更新：使用您的代码修改后，我正在运行新问题：

XMLHttpRequest无法加载localhost：4000 / users。请求标题字段预检响应中的Access-Control-Allow-Headers不允许授权

当我尝试上传文件时，我遇到了一个新问题：

POST localhost：4000 / upload 401（未经授权）

我尝试在数组中添加许多来源，而不仅仅是localhost：3000，但没有任何变化。

其他任何事情：如果我添加＆＃34; Origin＆＃34;，＆＃34; Content-Type＆＃34;，＆＃34;接受＆＃34;到标题列表，我有以下错误：

选项localhost：4000 / users net :: ERR_CONNECTION_REFUSED。

我承认CORS有点困难。

Answer 1

根据cors docs 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问题对预检请求的响应没有通过访问控制检查：＆＃39;访问控制 - 允许 - 来源＆＃39;头

1 个答案: