Node JS - CORS - 请求 header 预检响应中的 Access-Control-Allow-Headers 不允许字段授权

Question

我尝试将文件上传到我的服务器，但我遇到了 CORS 和 Node JS 的问题。

我的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');
// pour l'upload
var multer = require('multer');

 const corsOptions = {
   origin: ["http://localhost:3000"],
   credentials: true,
   methods: "POST, PUT, OPTIONS, DELETE, GET",
   allowedHeaders: "X-Requested-With, Content-Type"
 }
 app.use(cors(corsOptions))
 app.options('*', cors(corsOptions));

 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);
});

我有以下问题：

XMLHttpRequest 无法加载http://localhost:4000/users 。 请求 header 字段 Authorization is not allowed by Access-Control-Allow-Headers in preflight response

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

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

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

其他任何东西：如果我将“Origin”，“Content-Type”，“Accept”添加到标题列表，我会出现以下错误：

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

我得承认 CORS 有点难。

谢谢

Answer 1

下面的代码应该工作：

var express = require("express");
var cors = require("cors");
var app = express();

var corsOptions = {
    origin: ' your_url',
    optionsSuccessStatus: 200 // some legacy browsers (IE11, various SmartTVs) choke on 204
  }

app.use(function(req, res, next) {
    // res.header("Access-Control-Allow-Origin", "*");
    // res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    // app.header('Access-Control-Allow-Origin', 'http://localhost');
    // app.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    // app.header('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
    // app.header('Access-Control-Allow-Credentials', true);
    next();
});
///products/:id
  app.get('/helloworld', cors(corsOptions), function (req, res, next) {
    res.json({msg: 'This is CORS-enabled for only example.com.'});
  })

  app.listen(3000, function() {
      console.log("CORS-enabled web server listening on port 3000");
  });

var response_text;

var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest;
var xhr = new XMLHttpRequest();
//Get the html of the website
function createCORSRequest(method, url) {
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr) {
        // Check if the XMLHttpRequest object has a "withCredentials" property.
        // "withCredentials" only exists on XMLHTTPRequest2 objects.
        xhr.withCredentials = true;
        xhr.open(method, url, true);
        xhr.send();    
    } else if (typeof XDomainRequest != "undefined") {

      // Otherwise, check if XDomainRequest.
      // XDomainRequest only exists in IE, and is IE's way of making CORS requests.
      xhr = new XDomainRequest();
      xhr.open(method, url);
      xhr.send();
    } else {

      // Otherwise, CORS is not supported by the browser.
      xhr = null;

    }
    return xhr;
  }

  var url = "your_url";

  var xhr = createCORSRequest('GET', url);
  if (!xhr) {
    throw new Error('CORS not supported');
  }

  xhr.onload = function() {
    response_text = xhr.responseText;
    console.log(response_text);
    console.log(values);
    // process the response.
   }

   xhr.onerror = function() {
     console.log('There was an error!');
   }

然后cd到终端中的文件目录并写入：$ node filename.js

然后它将在http://localhost:3000/helloworld上侦听希望这有效。

Answer 2

要解决此问题，请使用以下代码

npm install cors

在 server.js 文件中添加代码

var cors = require('cors')
app.use(cors())

Answer 3

我想最简单的解决方案是将Authorization添加到Access-Control-Allow-Headers 。

res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");

最后，您还想用 HTTP ok 响应预检 OPTIONS 请求，例如：

if(req.method === 'OPTIONS') {
    res.status(201);
    res.end();
}
else {
    next();
}