CODEWITHSUNDEEP
javascriptangularjsnode.jsionic-frameworkcors
NitinD
NitinD

Reputation: 499

Angular / Node CORS Issue

I am building a web application with node js on server side and angular on client.

I am running the server on different domain and client on other domain.

My server side code:

var express = require('express');
var app = express();
var http = require("http").createServer(app);
var request = require('request');

app.use(function(req, res, next) {
  console.log(req.headers);
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", 
             "Origin, X-Requested-With, Content-Type, Accept, Authorization");
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  next();
});

app.get('/api/hello', function(req, res){
  var data = {'message': 'Server is running'}
  res.jsonp(data);
});

http.listen(5000);

and on the client side (Angular).

angular.controller('myController', function($state, $http){
  $http.get('http://localhost:5000/api/hello').success(function(response, status) {
    console.log(responce);
  }).error( function(error, status) {
    console.log(error)
  });
});

My Server is running on port 5000 and my client on port 4000 on different domains.

When I send the above request from client, I get below error in browser console,

XMLHttpRequest cannot load http://localhost:5000/api/hello. Response to preflight request doesn't pass access control check: A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost:4000' is therefore not allowed access.

I have same problem with the ionic app too.

What could be the reason behind this?

I am accessing these API's from multiple domains and from different applications like mobile and web.

Upvotes: 1

Views: 4373

Answers (3)

Ian
Ian

Reputation: 5883

In that error, it appears as though your Access-Control-Allow-Credentials header might be to returned as true? What headers does your response contain?

Try adding res.header('Access-Control-Allow-Credentials', false); when you're adding your headers and see if that solves that particular error.

Also, is there a reason why you've included the http.createServer(app) code? ExpressJS apps are typically started by calling app.listen directly like so which could well be the issue.

app.listen(5000, function () {
  console.log('Example app listening on port 5000!');
});

Upvotes: 0

Atul Agrawal
Atul Agrawal

Reputation: 1520

in routes i made a file named as corsheaders.js which contains 

module.exports = function (req, res, next) {
    if (allowedHosts.indexOf(req.headers.origin) > -1) {
        res.header('Access-Control-Allow-Origin', req.headers.origin);
        res.header('Access-Control-Allow-Credentials', true);
        res.header('Access-Control-Allow-Methods', 'GET,POST,DELETE,OPTIONS,PUT');
        res.header('Access-Control-Allow-Headers', 'Content-Type');
    }
    next();
};

here allowedHosts is an array which contains the domain which i am allowing and in app.js i have use this file as

app.use(require('./routes/corsheaders'));

Upvotes: 0

sabbir
sabbir

Reputation: 2025

you can use cors as like as given below:

install cors module

npm install --save cors

server code

 var express = require('express');
 var cors = require('cors');


 var app = express();     

 app.use(cors());

 // others code

Angular

angular.controller('myController', function($state, $http){

   $http
     .get('http://localhost:5000/api/hello')
     .then(function(response) {
          console.log(responce);
       }, function(error, status) {
          console.log(error)
       });
});

Upvotes: 1

Related Questions