AngularJs custom headers with restful API GET method

Question

I'm not being able to pass custom headers to connect to my API, when I run the app in google chrome, I get the following error:

Remote Address:177.70.11.212:10
Status Code:401 Authorization Required
Request Headersview source
Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:pt-PT,pt;q=0.8,en-US;q=0.6,en;q=0.4
Access-Control-Request-Headers:accept, x-api-credencial, x-api-origem, x-api-token
Access-Control-Request-Method:GET
Connection:keep-alive
Host:api.repmais.com
Origin:http://evil.com/
Referer:http://localhost:8100/

And I can't see my headers in the network table, what am I missing here?

     angular.module('starter.services', [])


    .factory('ServiceClientes', ['$http', function ($http) {

        var endpoint = 'http://api.repmais.com/api/clients';

        var token = "99KI9Gj68CgCf70deM22Ka64chef2C40Gm2lFJ2J0G9JkD0bFAcbFfd19MfacGf3FFm8CM1hG0eDiIk8";
        var credencial = "rm@w.com.br:cd87cd5ef753a06ee79fc75ds7cfe66c";
        var origem = "mobile";


         var config = {
        url: endpoint,
        method: 'GET',
        headers: {
            'X-API-TOKEN': token,
            'X-API-CREDENCIAL': credencial,
            'X-API-ORIGEM': origem
        }
    };


    return {

        getAll: function () {
            return $http(config);
        }
 }]);

app.js:

 .config(['$httpProvider', function($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        $httpProvider.defaults.withCredentials = false;
        $httpProvider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
    }
    ])

controller.js:

.controller('PlaylistsCtrl', function ($scope, ServiceClientes) {

        ServiceClientes.getAll().success(function (data) {
            console.log(data);
        }).error(function (error) {
            console.log(error);
        });

score 1 · Answer 1 · answered Feb 18 '15 at 17:25

1

You just need to pass your headers in as a config object:

var config = {
  url: endpoint,
  method: 'GET',
  headers: {
    'X-API-TOKEN': token,
    'X-API-CREDENCIAL': credencial,
    'X-API-ORIGEM': origem
  }
}

return $http(config);

This should return you a promise that you can handle wherever you are calling your endpoint:

ServiceClients.getAll().success(function () {
  // use your data
}).error(function () {
  // handle error
});

answered Feb 18 '15 at 17:25

cjkenn

186
2
6

Thank you for your help, I've updated the code, and now I'm getting the following error: GET http://localhost:8100/[object%20Object] 404 (Not Found) – Stack two Feb 18 '15 at 17:37
I see your code has been updated to use $http.get(config). You don't need to add the 'get' call in there, the method is defined in the config object. Just call it like $http(config); Alternatively, you can use a shortcut method, see here: http://stackoverflow.com/questions/11876777/set-http-header-for-one-request – cjkenn Feb 18 '15 at 17:42
OK, I've updated the question, it seems that the headers are not being passed, still getting XMLHttpRequest cannot load http://api. repmais.com.br/api/cliente. Invalid HTTP status code 401 – Stack two Feb 18 '15 at 17:54
Check your network request and see if your headers are present. A 401 response can still be returned if your credentials are invalid. – cjkenn Feb 18 '15 at 18:01
I'm using Advanced Rest Client to test the API and it is working fine with that headers – Stack two Feb 18 '15 at 18:02

AngularJs custom headers with restful API GET method

1 Answers1