POSTing data from angularJS to Express using $http

Question

I'm trying so send some json data from angularjs to express/nodejs

AngularJS code:

$http({
      method: 'POST',
      url: 'http://localhost:8000/api/auth',
      data: {
         name: user,
         password: passwd
      },
      headers: {
         'Content-Type': 'application/x-www-form-urlencoded'
      }
   })
   .success(function(data, status, headers, config) {
      $scope.loginStatus = data;
   })
   .error(function(data, status, headers, config) {
      $scope.lloginStatusogin = data;
   });

ExpressJS code:

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


var config = require('./config'); // get our config file


var port = process.env.PORT || 8000; // used to create, sign, and verify tokens

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
   extended: true
}));

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

var apiRoutes = express.Router();

apiRoutes.post('/auth', function(req, res) {

   console.log(req.body)
});

app.use('/api', apiRoutes);
app.listen(port);

but at express when log the req.body i get this object { '{"name":"Nick","password":"password"}': '' } the whole json object is taken as a property having an empty value i don't understand or see what am doing wrong.

Try to change the header 'Content-Type': 'application/x-www-form-urlencoded' to 'Content-Type: application/json' — Dario
– Dario, Commented Mar 29, 2017 at 12:39
@Dario ir didnt mention it, but i tried that also and it didn't work — Xsmael
– Xsmael, Commented Mar 29, 2017 at 15:30

lin · Accepted Answer · 2017-03-29 16:03:19Z

1

Send Content-Type: application/json if you try to send an object. application/x-www-form-urlencoded expects an urlEncoded string as body property. The following both solutions should work for you, choose one.

Send JSON object as body with `application/json` content-type

$http({
    method  : 'POST',
    url     : 'http://localhost:8000/api/auth',
    data    : {
        name: user,
        password: passwd
    },
    headers : {'Content-Type': 'application/json'}
})
.success(function(data, status, headers, config){
    $scope.loginStatus=data;
})
.error(function(data, status, headers, config){
    $scope.lloginStatusogin=data;
});

Send urlEncoded sring in body with `application/x-www-form-urlencoded` content-type.

transformRequest will create a urlEncoded string based on data before the request will be send.

$http({
    method: 'POST',
    url: 'http://localhost:8000/api/auth',    
    transformRequest: function(obj) {
        var str = [];
        for(var p in obj) {
            str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
        }
        return str.join("&");
    },
    data: {
        name: user,
        password: passwd
    },
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
})
.success(function(data, status, headers, config){
    $scope.loginStatus=data;
})
.error(function(data, status, headers, config){
    $scope.lloginStatusogin=data;
});

edited Mar 29, 2017 at 16:03

answered Mar 29, 2017 at 12:40

lin

18.5k4 gold badges66 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Xsmael Over a year ago

does $.param use jQuery ?

lin Over a year ago

Oww yea, shit hold on I add the correct way for angularjs by transform the data.

Xsmael Over a year ago

how did you know about the transformRequest ? i never saw that, cool dude!

lin Over a year ago

Well made, x-www-form-urlencoded is some web standard long before AngularJS was created. In that way its pretty easy to know what kind of body is expected on that request. =) I was facing this "problem" years ago in AngularJS. Glad to help

Xsmael Over a year ago

Yea, experience matters, thanks i wasted 1 one whole day on this isssue :( ( but it could have been worse :) )

RIYAJ KHAN · Accepted Answer · 2017-03-29 12:39:55Z

1

In the header part : it should be

{'Content-Type': 'application/json'}

instead of

{'Content-Type': 'application/x-www-form-urlencoded'}

answered Mar 29, 2017 at 12:39

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

Collectives™ on Stack Overflow

POSTing data from angularJS to Express using $http

2 Answers 2

Send JSON object as body with `application/json` content-type

Send urlEncoded sring in body with `application/x-www-form-urlencoded` content-type.

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Send JSON object as body with application/json content-type

Send urlEncoded sring in body with application/x-www-form-urlencoded content-type.

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related

Send JSON object as body with `application/json` content-type

Send urlEncoded sring in body with `application/x-www-form-urlencoded` content-type.