Angular $http.post not sending headers - angularjs

Question

I have created a basic angular $http.post request to receive some data. In order to receive the data I need to provide a key in the header.
The server is responding that the key is missing even though I've explicitly sent it.
100% it's not the server because I used an online curl tool which provided the required response.
$http.post(url, {
data:{username: username,password: password},
headers:{'Content-Type': 'application/x-www-form-urlencoded','key': key},
})
.then(function(response){
console.log(response)
})
It would be appreciated if someone could spot what I'm doing wrong here. Thanks.

Answer 1

You have a trailing comma after the headers key, perhaps this is throwing things off?
$http.post(url, {
data:{username: username,password: password},
headers:{'Content-Type': 'application/x-www-form-urlencoded','key': key}, // Remove this comma
})
.then(function(response){
console.log(response)
});

Answer 2

According to docs should be:
Shortcut method
$http.post('http://localhost:9191/api/signin', {
username: 'some username',
password: 'some password'
}, {
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'key': '123'
}
})
.then(function(response) {
console.log(response)
});
Long version
$http({
method: 'POST',
url: 'http://localhost:9191/api/signin',
data: {
username: 'some username',
password: 'some password'
},
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'key': '123'
}
}).then(function(response) {
console.log(response)
});
Tested and is working fine.