Restangular not setting headers on post

Question

I am trying to set the header for a single post request using restangular but the request is being sent as plain text instead of json. I have read the documentation here as well as a similar question. I have followed the prescribed methods but to no avail.

On the server side am using Express 4.x and communicating with Mongodb using an ORM called Moongoose.

Server side: server.js using express.js 4.0

'use strict';

var express = require('express'),
    morgan  = require('morgan'),
    port =process.env.PORT || 3000,
    bodyParser  = require('body-parser'),
    methodOverride = require('method-override'),
    app = express();


app.use(morgan('dev'));             
app.use(bodyParser());              
app.use(methodOverride());          
app.use(express.static(__dirname+"/app"));

require('./config/models');
require('./config/user_ctrl');
require('./config/comt_ctrl');
require('./config/routes')(app);

app.listen(port);   
console.log('Magic happens on port: '+port); 

//Server side: routes.js
var pips = require('./user_ctrl');

module.exports = function(app){

    app.get('/api/pipplez',pips.getPipplez); //Gets all users in collection
    app.post('/api/pipplez/wan',pips.getPipplezById); //Gets the specified user

    app.all('/api/*', function(req, res) {
        res.send(404);
    });

    app.get('/*', function(req, res){
       res.send('index.html'); 
    });
};

On the client side I have this.

Client side: app.js after config

.factory('userServ',function(Restangular){

  var ol = Restangular.withConfig(function(conf){
    conf.setBaseUrl('/api/')
  });

  var an = Restangular.withConfig(function(conf){
    conf.setBaseUrl('/api/users/')
  });
    return{
          oldem: ol.one('users').getList(),
          wandem: an.one('one')
    }
});

Client side: userCtr.js

'use strict';

ting.controller('userCtrl', function($scope, userServ){

    $scope.pip = {
       name: ''
    };

    $scope.getOlPips = function(){

    userServ.oldem.then(function(rez){

        if(rez!=='null'){
            $scope.dem = rez;
            console.log($scope.dem);
        }
    }, function(err){
        console.log('Error!!!\n', err );
    })  
};

$scope.getWanPip = function(pip){
    //console.log(pip);
    RestServ.wandem.post(pip, {}, {'Content-Type':'application/json'}).then(function(res){
        console.log(res)      
    }, function(err){
        console.log('Error!!!\n', err);
    })
};

$scope.getOlUzas();    
});

part of the html

<form>
    <input ng-model='pip.unm' maxlength= '20' placeholder='Search for user...'>
    <button class="btn btn-primary" ng-click = 'getWanPip(pip)'>Find</button>
</form>

I have extensively tested the back end using postman. The back end is functioning. The application is able to get all the records from the database however when I make the post request I get a 404 because the format of the request is sent as plain text instead of json. How can I get this to work?

Answer 1

After groping around the web, I found that restangular sends form data to the server in json format by default. I was misguided by the developer tools from chrome. In order to disect http requests I recommend fiddler If one wants to format the header in restangular being sent as a request from the form you can do the following:

//From the previous example....
//Assuming restangular did not not send form data in json format by default

    $scope.getWanPip = function(pip){

        RestServ.wandem.post(pip, {},{}, {'Content-Type':'application/json'}).then(function(res){
            console.log(res)      
        }, function(err){
            console.log('Error!!!\n', err);
        })

Note the two empty curly braces instead of one... I can't still perform the post but this is because the data is being sent as part of the url instead of separately. This calls for another question...

Answer 2

Don't pass two empty objects, try passing:

.post(pip, undefined, undefined, {'Content-Type':'application/json'})

Or even .customPOST() instead of .post().

Answer 3

You can do:

const headers = { headers: { 'Content-Type':'application/json' } };

RestServ.wandem.withHttpConfig(headers).post(pip)