title: Can't allow Cross-Origin Request in local Nodejs server
body: <p>I've created a local REST API server in nodejs, which is fetching data from local Mongodb database. I've also created a basic web page, which request this data from the server locally. Now, when I try to get data from web page, it gives me following error: </p>
  
  <pre><code>Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:4000/todos. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).
  </code></pre>
  
  <p>I've searched about on stackoverflow, and found <a href="https://stackoverflow.com/questions/29547003/angularjs-no-access-control-allow-origin-header-is-present-on-the-requested-r">THIS</a> and <a href="https://stackoverflow.com/questions/18310394/no-access-control-allow-origin-node-apache-port-issue">THIS</a> solutions. I've added the suggested headers in my main <code>app.js</code> file. But still it gives the same error. </p>
  
  <p>Following is my servers <code>app.js</code> file, where I've added these headers.</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 routes = require('./routes/index');
  var users = require('./routes/users');
  var todos = require('./routes/todos');
  
  // load mongoose package
  var mongoose = require('mongoose');
  
  // Use native Node promises
  mongoose.Promise = global.Promise;
  
  // connect to MongoDB
  mongoose.connect('mongodb://localhost/todo-api')
  .then(() =&gt;  console.log('connection succesful'))
  .catch((err) =&gt; console.error(err));
  
  var app = express();
  
  // view engine setup
  app.set('views', path.join(__dirname, 'views'));
  app.set('view engine', 'ejs');
  
  // 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('/', routes);
  app.use('/users', users);
  app.use('/todos', todos);
  
  // Add headers
   app.use(function (req, res, next) {
  
      // Website you wish to allow to connect
      res.setHeader('Access-Control-Allow-Origin', '*');
  
      // Request methods you wish to allow
      res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT,    PATCH, DELETE');
  
  // Request headers you wish to allow
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
  
  // Set to true if you need the website to include cookies in the requests sent
  // to the API (e.g. in case you use sessions)
  res.setHeader('Access-Control-Allow-Credentials', true);
  
  // Pass to next layer of middleware
  next();
  });
   // 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 handlers
  
  // development error handler
  // will print stacktrace
  if (app.get('env') === 'development') {
    app.use(function(err, req, res, next) {
      res.status(err.status || 500);
      res.render('error', {
        message: err.message,
        error: err
      });
    });
  }
  
  // production error handler
  // no stacktraces leaked to user
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: {}
    });
  });
  
  module.exports = app;
  </code></pre>
  
  <p>And following is the code(Angularjs) of web page, from where I want to get data from my API. </p>
  
  <p><code>dbConnection.html</code> </p>
  
  <pre><code>&lt;html ng-app="demo"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"&gt; &lt;/script&gt;
  &lt;head&gt;
      &lt;title&gt; dbConnection Demo&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body ng-controller="db"&gt;
      &lt;div ng-repeat="product in db.products"&gt;
          {{product._id}} &lt;/br&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  
  &lt;script&gt;
      var app = angular.module('demo', []);
      app.controller('db', ['$http', function($http){
          var store = this;
          store.products = [];
  
          $http({
              method: 'GET',
              url: 'http://localhost:4000/todos'
              }).then(function (success){
                  store.products = success;
              },function (error){
  
              });
      }]);
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Even after I've added headers as suggested in the answers, I'm getting the same error. What am I missing here? I'm completely newbie in this field. Thanks! </p>