title: Node JS - CORS Issue Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header
body: <p>I'm running an issue with my Angular 2 web app.</p>
  
  <p>On Node JS server side, I got an issue with CORS preflighting.</p>
  
  <p>I want to upload a file on the server, and when I do it, I have this issue : </p>
  
  <p><strong>XMLHttpRequest cannot load <a href="http://localhost:4000/upload" rel="noreferrer">http://localhost:4000/upload</a>. Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin '<a href="http://localhost:3000" rel="noreferrer">http://localhost:3000</a>' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.</strong></p>
  
  <p>where localhost:4000 is my server and localhost:3000 is my client.</p>
  
  <p>My <strong>server.js</strong> file is like this : </p>
  
  <pre><code>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);
  });
  </code></pre>
  
  <p>The weirdest thing is that, when I remove the following part, the upload is working :</p>
  
  <pre><code>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'));
  </code></pre>
  
  <p>But then, I got other issues : </p>
  
  <p>(I did not include http prefix before localhost due to reputation)</p>
  
  <p>1) zone.js:2019 OPTIONS localhost:4000/users 404 (Not Found)</p>
  
  <p>2) XMLHttpRequest cannot load localhost:4000/users. Response for preflight has invalid HTTP status code 404</p>
  
  <p>3) EXCEPTION: Response with status: 0  for URL: null</p>
  
  <p>4) Uncaught Response {_body: ProgressEvent, status: 0, ok: false, statusText: "", headers: Headers…}</p>
  
  <p>I think we have to fix the cors() part in the first example but I don't know what to really do.</p>
  
  <p>Thanks</p>
  
  <p>UPDATE : After modifying with your code, I'm running a new issue :</p>
  
  <p><strong>XMLHttpRequest cannot load localhost:4000/users. Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response</strong></p>
  
  <p>and when I try to upload my file, I got a new issue :</p>
  
  <p><strong>POST localhost:4000/upload 401 (Unauthorized)</strong></p>
  
  <p>I tried to add many origins in an array instead of only localhost:3000, but nothing changes.</p>
  
  <p>Anything else : if I add "Origin","Content-Type","Accept" to the list of headers, I have this following error :</p>
  
  <p><strong>OPTIONS localhost:4000/users net::ERR_CONNECTION_REFUSED.</strong></p>
  
  <p>I got to admit CORS is a bit difficult.</p>