Just can't resolve CORS issue

Question

I just can't make calls to my fully functional API because I keep getting this error -

angular.js:9827 **OPTIONS http://xyz.mybluemix.net/add_user** (anonymous function) 
@ angular.js:9827sendReq @ angular.js:9628serverRequest 
@ angular.js:9344processQueue @ angular.js:13189(anonymous function) 
@ angular.js:13205Scope.$eval @ angular.js:14401Scope.$digest 
@ angular.js:14217Scope.$apply @ angular.js:14506(anonymous function) 
@ angular.js:16232completeOutstandingRequest
@ angular.js:4905(anonymous function) 
@ angular.js:5285
welcome.html:1 **XMLHttpRequest cannot load http://xyz.mybluemix.net/add_user. 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:9000' is therefore not allowed access. 
The response had HTTP status code 502.**

Here is the code I am running:

//Client side code (Angular JS)  
dataFactory.makeUser(user)
    .then(function (response) {
        console.log('User created');
        window.location = "index.html";
    }, function(error) {
        console.log('User failed to create: ' + error.message);
    });


    app.factory('dataFactory', ['$http', function($http) {

        var base = 'xyz';
        var dataFactory = {};

        //works fine
        dataFactory.getAllUsers = function () {
            return $http.get(base+"get_all_users");
        };

        //works fine
        dataFactory.getUserById = function (id) {
            return $http.post(base+"get_user_byId", id);
        };

        //the request with the problem
        dataFactory.makeUser = function (user) {
            return $http.post(base+"add_user", user);
        };

        return dataFactory;
    }]);


    //Server-side code 


    var express = require('express');
    var bodyParser = require('body-parser');
    var mysql      = require('mysql');
    var app = express();
    var cors = require('cors');
    app.use(cors());


    app.post('/add_user',  function(req, res) {
      var id = req.body.id;
      var name = req.body.name;
      var gender = req.body.gender;
      var email = req.body.email;
      var age_min = req.body.age_min;
      var age_max = req.body.age_max;
      var hometown = req.body.hometown;
      var picture = req.body.picture;

      var user = {
            id: id,
            name: name,
            gender: gender,
            email: email,
            age_min: age_min,
            age_max: age_max,
            hometown: hometown,
            picture: picture
        };

      connection.query('INSERT INTO users SET ?', user, function(err, rows) {
          if (err) {
            res.json(err);
            return;
          }
          res.json(rows);
      });

    });

Dreamlines · Answer 1 · 2016-04-22T22:09:51.217

It appears you're trying to do a cor from your web domain to localhost and you haven't explicitly told the server, localhost, that this type of request is ok. The server refuses to shake hands and comes back (preflight) saying that business is a no-go.

I am not too familiar with npm-cors, and according to the documentation your implementation looks correct.

express comes with the ability to control cor, which is what you're trying to do:

app = express();
app.use(function(req, res, next) {
  //
  //allow cor on origin (use req.headers.origin to allow everything,
  //very discouraged since you're api only communicates with your site)
  //
  res.header('Access-Control-Allow-Origin', 'http://xyz.mybluemix.net');

  //if you are passing creds, which you're not
  //res.header('Access-Control-Allow-Credentials', true); 

  //methods allowed
  res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');

  //headers allowed
  res.header('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Accept');

  //continue on with the request
  next();
});

I forgot to mention to make sure your base http in has the port attached to it:

$http.post('http://xyz.mybluemix.net:9000/post', data);

Just can't resolve CORS issue

1 Answers1