Adding a custom header to HTTP request using angular.js

Question

I am a novice to angular.js, and I am trying to add some headers to a request:

   var config = {headers: {             'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',             'Accept': 'application/json;odata=verbose'         }     };     $http.get('https://www.example.com/ApplicationData.svc/Malls(1)/Retailers', config).success(successCallback).error(errorCallback); 

I've looked at all the documentation, and this seems to me like it should be correct.

When I use a local file for the URL in the $http.get, I see the following HTTP request on the network tab in Chrome:

GET /app/data/offers.json HTTP/1.1 Host: www.example.com Connection: keep-alive Cache-Control: max-age=0 If-None-Match: "0f0abc9026855b5938797878a03e6889" Authorization: Basic Y2hhZHN0b25lbWFuOkNoYW5nZV9tZQ== Accept: application/json;odata=verbose X-Requested-With: XMLHttpRequest If-Modified-Since: Sun, 24 Mar 2013 15:58:55 GMT User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22 X-Testing: Testing Referer: http://www.example.com/app/index.html Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8 Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3 

As you can see, both of the headers were added correctly. But when I change the URL to the one shown in the $http.get above (except using the real address, not example.com), then I get:

OPTIONS /ApplicationData.svc/Malls(1) HTTP/1.1 Host: www.datahost.net Connection: keep-alive Access-Control-Request-Method: GET Origin: http://mpon.site44.com User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22 Access-Control-Request-Headers: accept, origin, x-requested-with, authorization, x-testing Accept: */* Referer: http://mpon.site44.com/app/index.html Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8 Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3 

The only difference in code between these two is one is for the first the URL is a local file, and for the second the URL is a remote server. If you look at the second Request header, there is no Authentication header, and the Accept appears to be using a default instead of the one specified. Also, the first line now says OPTIONS instead of GET (although Access-Control-Request-Method is GET).

Any idea what is wrong with the above code, or how to get the additional headers included using when not using a local file as a data source?

Answer 1

I took what you had, and added another X-Testing header

var config = {headers:  {         'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',         'Accept': 'application/json;odata=verbose',         "X-Testing" : "testing"     } };  $http.get("/test", config); 

And in the Chrome network tab, I see them being sent.

GET /test HTTP/1.1 Host: localhost:3000 Connection: keep-alive Accept: application/json;odata=verbose X-Requested-With: XMLHttpRequest User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.22 (KHTML, like Gecko) Chrome/25.0.1364.172 Safari/537.22 Authorization: Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ== X-Testing: testing Referer: http://localhost:3000/ Accept-Encoding: gzip,deflate,sdch Accept-Language: en-US,en;q=0.8 Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.3 

Are you not seeing them from the browser, or on the server? Try the browser tooling or a debug proxy and see what is being sent out.

Answer 2

Basic authentication using HTTP POST method:

$http({     method: 'POST',     url: '/API/authenticate',     data: 'username=' + username + '&password=' + password + '&email=' + email,     headers: {         "Content-Type": "application/x-www-form-urlencoded",         "X-Login-Ajax-call": 'true'     } }).then(function(response) {     if (response.data == 'ok') {         // success     } else {         // failed     } }); 

...and GET method call with header:

$http({     method: 'GET',     url: '/books',     headers: {         'Authorization': 'Basic d2VudHdvcnRobWFuOkNoYW5nZV9tZQ==',         'Accept': 'application/json',         "X-Login-Ajax-call": 'true'     } }).then(function(response) {     if (response.data == 'ok') {         // success     } else {         // failed     } });