set header authorization to angular $http post

Question

i want to set an authorization on the header of $http.post request in angular js.

on simple html ajax it works:

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (xhttp.readyState == 4 && xhttp.status == 200) { //do something 
  }
};
xhttp.open("POST", url, true);
xhttp.setRequestHeader("Authorization", "xxxxxxxxxx");
xhttp.send();

On angular I get an error message - "Cannot read property 'protocol' of undefined"

var configHeader = {
  headers: {
    'Authorization': 'xxxxxx'
  }
};

$http.post(url, configHeader).then(function(response) {
  //do something 
});

please help.

Answer 1

As per documentation

var configHeader = {
  headers: {
    'Authorization': 'xxxxxx'
  }
};

$http.post(url, {}, configHeader).then(function(response) {
  //do something 
});

Answer 2

$http.post has 3 parameters:

• url
• data
• config (optional)

You're missing the data to post...

Answer 3

Sample angular request:

var req = {
method: 'POST',
url: 'http://example.com',
headers: {
Content-Type': undefined
},
data: { test: 'test' }
}

I am guessing, your configHeader should be configHeader: {'Authorization': 'xxx'}

Answer 4

Finally I found the answer!

There is some bug in chrome that create this error only when you using break point on the developer tool. I removed the break point and this error never appeared again on the console.

FYI - this is the error which has been displayed on the chrome console before I had removed the break point:

enter image description here