Can't send POST from angular.js to express.js

Question

I having problems to communicate between my angular.js APP and my express.js REST.

I'm using yeoman 1.0 with generator-angular 0.7.1.

I tried to use a middleware config for my grunt serve but i did not get it working.

Angular App (port: 9000):

angular.module('wboxApp')
  .controller('AdminCtrl', function ($scope, $routeParams, $http, fbRef) {
    var ref = fbRef();
    var token = $routeParams.token;

    $http.post('http://127.0.0.1:3000/box/token/get', {token: token}).success(function (data) {
        console.log(data);
      }
    });
  });

Express API (port: 3000):

app.post('/box/token/get', function (req, res) {
  res.header('Access-Control-Allow-Origin', req.headers.origin || "*");
  res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,HEAD,DELETE,OPTIONS');
  res.header('Access-Control-Allow-Headers', 'content-Type,x-requested-with');

  var token = req.body.token;
  var tokenRef = ref.child('tokens').child(token);  

  tokenRef.once('value', function (data) {
    var fullToken = data.val();

    fullToken = fullToken + '.' + token;

    if (data.val()) {
      res.json({fullToken: fullToken});
    } else {
      res.json({fullToken: null});
    }
  });
});

Browser Error:

OPTIONS http://127.0.0.1:3000/box/token/get No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:9000' is therefore not allowed access.
XMLHttpRequest cannot load http://127.0.0.1:3000/box/token/get. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:9000' is therefore not allowed access.

score 5 · Accepted Answer · edited Mar 05 '14 at 13:22

5

It seems the angular page was being served by server running on 127.0.0.1:9000. Cross origins policy disallows ajax requests from other domains. To get around it you can add express middleware which adds the headers for cross origin requests -

app.all('/*', function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type,X-Requested-With');
    next();
});

edited Mar 05 '14 at 13:22

cebor

6,546
4
24
31

answered Mar 05 '14 at 12:02

Mukesh Soni

6,646
3
30
37

i also added `res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,HEAD,DELETE,OPTIONS');` and now it works. – cebor Mar 05 '14 at 13:08
I don't think that is needed in your case. 'Access-Control-Allow-Methods' is only needed for preflighted requests. And yours is a post request which doesn't seem preflighted. What is the content-type of the request? – Mukesh Soni Mar 05 '14 at 13:12
`application/json` but i think angular.post needs `OPTIONS`, whithout i get an error. – cebor Mar 05 '14 at 13:16
hmm... seems application/json requests are not the same as application/text, which is strange. and application/json requests are preflighted. Cool. – Mukesh Soni Mar 05 '14 at 13:20
Sorry my fault: adding `Content-Type` to `Access-Control-Allow-Headers` gets it working. – cebor Mar 05 '14 at 13:21

score 0 · Answer 2 · edited May 23 '17 at 12:02

0

Oh dear, do not perform cross-origin requests!
There's an better way: grunt-connect-proxy - Issue requests to 9000 port and have your frontend server forward them to actual backend.

here's how to configure it in less than 3 minutes: https://stackoverflow.com/a/21655532/1432478

edited May 23 '17 at 12:02

Community

1
1

answered Mar 05 '14 at 14:13

vucalur

6,007
3
29
46

I need CORS only for dev, so i think edit my Headers is the easier solution. – cebor Mar 06 '14 at 11:36
@cebor Is COR simpler? I would really questionnaire that. Furthermore, it's not fully browser agnostic and you have to hardcode URLs. But as you wish – vucalur Mar 06 '14 at 12:18

Can't send POST from angular.js to express.js

2 Answers2