title: Nodejs Express CORS issue with 'Access-Control-Allow-Origin'
body: <p>I'm trying to create a single page app using Angular 1, Nodejs and Express. I'm using Angular's $http post feature to post a request where I pass header values in the request to an API endpoint. </p>
  
  <p>I am encountering an error message in Chrome:</p>
  
  <pre><code>XMLHttpRequest cannot load 
  http://localhost:7878/EIAMIDSupportREST/EIAMIDSupport/updateEIAMID. 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 
  'http://localhost:3000' is therefore not allowed access. The credentials 
  mode of requests initiated by the XMLHttpRequest is controlled by the 
  withCredentials attribute.
  </code></pre>
  
  <p>With this request body:</p>
  
  <pre><code>HTTP/1.1 200 OK
  X-Powered-By: Express
  Access-Control-Allow-Origin: *
  Access-Control-Allow-Methods: GET,PUT,POST,PATCH,DELETE
  Access-Control-Allow-Headers: Content-Type
  Allow: POST
  Content-Type: text/html; charset=utf-8
  Content-Length: 4
  Date: Tue, 23 May 2017 23:32:15 GMT
  Connection: keep-alive
  </code></pre>
  
  <p>To remedy the CORS issue, I've npm installed the <a href="https://www.npmjs.com/package/cors" rel="nofollow noreferrer"><code>cors</code></a> library.</p>
  
  <p>In my app.js, I have the add the following lines:</p>
  
  <pre><code>var cors = require('cors');
  var app = express();
  app.use(cors());
  </code></pre>
  
  <p>Here is my full app.js:</p>
  
  <pre><code>var express = require('express');
  var path = require('path');
  var favicon = require('serve-favicon');
  var logger = require('morgan');
  var cookieParser = require('cookie-parser');
  var bodyParser = require('body-parser');
  
  var index = require('./routes/index');
  var users = require('./routes/users');
  
  var cons = require('consolidate');
  //enable CORS 
  var cors = require('cors');
  var app = express();
  app.use(cors({ origin: 'http://localhost:3000' , credentials :  true,  methods: 'GET,PUT,POST,OPTIONS', allowedHeaders: 'Content-Type,Authorization' }));
  // view engine setup
  app.engine('html', cons.swig)
  app.set('views', path.join(__dirname, 'views'));
  app.set('view engine', 'html');
  
  // uncomment after placing your favicon in /public
  //app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
  app.use(logger('dev'));
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({ extended: false }));
  app.use(cookieParser());
  app.use(express.static(path.join(__dirname, 'public')));
  
  app.use('/', index);
  app.use('/users', users);
  
  // catch 404 and forward to error handler
  app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
  });
  
  // error handler
  app.use(function(err, req, res, next) {
    // set locals, only providing error in development
    res.locals.message = err.message;
    res.locals.error = req.app.get('env') === 'development' ? err : {};
  
    // render the error page
    res.status(err.status || 500);
    res.render('error');
  });
  
  module.exports = app;
  </code></pre>
  
  <p>And here is my index.html page</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;script 
  
  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  var app = angular.module("app", []);
     app.controller("HttpGetController", function ($scope, $http) {
         $scope.SendData = function () {
           var req = {
            method: 'POST',
            url: 'http://localhost:7878/EIAMIDSupportREST/EIAMIDSupport/updateEIAMID',
            withCredentials: true,
            headers: {
              'Content-Type': 'application/x-www-form-urlencoded',
              'Authorization': 'Basic user:password'
            }
           }
           $http(req)
             .then(function(data, status, header, config)
               {
                 $scope.PostDataResponse = data,
                 console.log($scope.PostDataResponse);
               })
               .catch(function(data, status, header, config)
               {
                  $scope.PostDataResponse = data,
                  console.log($scope.PostDataResponse);
               });
  
         };
  
       });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div ng-app="app"&gt;
      &lt;div ng-controller="HttpGetController"&gt;
        &lt;button  ng-click="SendData()" &gt;Link Accounts&lt;/button&gt;
        &lt;hr /&gt;AND THE RESPONSE IS:{{ PostDataResponse }}
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>However, it still does not work.</p>
  
  <p>Can anyone please advise how and where I need to update my code to fix the 'Access-Control-Allow-Origin' wildcard issue? </p>