Setting up Blog with Angular - Error "No 'Access-Control-Allow-Origin' header is present on the requested resource."

express
angular

#1

I’m receiving an error after movies my entries to entries.js reading: XMLHttpRequest cannot load https://*. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘https://preview.c9users.io’ is therefore not allowed access.

I have set the access-control-allow in the index.js and am not sure where it’s going wrong. Assistance is much appreciated and let me know if you require further information.

index.js

var express = require('express');
var app = express();
// Add headers
app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888');

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

var fs = require('fs');
fs.readFile('./entries.json', 'utf8', function (err,data) {
  if (err) {
    return console.log(err);
  }

  var entries = JSON.parse(data);
  
  app.get("/entry", function(req,res){
    var title = req.query.title;
    var body = req.query.body;
    var entry = { title:title, body:body };
    entries.push(entry);
    res.send(entry);
  });
  
  app.get("/entries", function(req,res){
    console.log('getting entries!');
    res.send(entries);
  });
  
  app.use(express.static('../client'));
  
  app.listen(process.env.PORT, function () {
    console.log('Example app listening on port process.env.PORT!');
  });
});

app.js

(function() {
  // variables are declared at the top of the function's scope
  // three default entries to start with


  var app = angular.module('blogPosts', []);

  app.controller('EntriesController', ['$scope', '$http', function($scope, $http) {
    var vm = this;
    // `this` entry, the current entry for this method, is defaulted to an empty object
    this.entry = {};
    $http.get('*/entries').then(function(response) {
      console.log(response);
      vm.entries = response.data;
    });

    // method is called when adding an entry
    this.addEntry = function() {
      // requested title and body in storage
      $http({
        url: '*/entry',
        method: "GET",
        params: {
          title: this.entry.title,
          body: this.entry.body
        }
      });
      // does this.entry exist here? good way to find out is with `console.log(this.entry);` or `debugger;`
      this.entry.createdOn = Date.now();
      vm.entries.push(this.entry);
      var entries = vm.entries.map(function(entry) {
        // $$hashKey was preventing posts from displaying, auto delete to show posts.
        delete entry["$$hashKey"];
        return entry;
      })
      // turns parsed entries into strings
      localStorage.entries = JSON.stringify(entries);
      console.log("entries", vm.entries);
      // reset `this.entry` back to an empty object
      $scope.entryForm.$setPristine();
      this.entry = {};
    };
  }]);
})();

#2

res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8888');

Must be replaced by

res.setHeader('Access-Control-Allow-Origin', 'https://preview.c9users.io');

Read the detail tutorial on how CORS work here