Content-Type header not being set with Angular $http

Question

I'm trying to make a cross-origin POST request using Angular $http with the following code.

//I've tried setting and removing these http config options
$http.defaults.useXDomain = true;
delete $http.defaults.headers.common['X-Requested-With'];
$http.defaults.headers.common['Content-Type'] = 'application/x-www-form-urlencoded';

//Basic request, with some private headers removed
return $http({
    method: 'POST',
    //withCredentials:true,
    headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
    params: params,
    url: url
});

The preflight OPTIONS request gets a 200 OK , but the subsequent POST receives a 400 Bad Request response. Looking at the trace in Chrome's debug window, I do not see a Content-Type: application/x-www-form-urlencoded; charset=UTF-8 Content-Type: application/x-www-form-urlencoded; charset=UTF-8 header for the POST. I assume this is why the the server is returning a Bad Request response.

I'm setting some other custom headers that I have omitted form the code above, and they are being sent and displayed fine.

I should also mention that I can make this request using the Advanced Rest Client app for Chrome and receive the correct response. (An access token)

I have also tried just doing a straight-up XMLHttpRequest(), but I get the same errors.

Any insight on why my Content-Type header is not being set?

Answer 1

I'm not sure the Content-Type header will be sent if you are NOT sending any data. Add a data object and try it:

return $http({
    method: 'POST',
    //withCredentials:true,
    headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
    data: data,
    url: url
});

Also, usually with a post you use data instead of params (get).

You can also refer to this SO question that has some more info on how to transform the data if you need to: How can I post data as form data instead of a request payload?

Answer 2

The 'Content-Type' header is not being added to the request if the data property is undefined, you can send empty string as data "" for example.

 var req = {
                method: 'GET',
                url: '<your url here>',
                //headers: {
                //    'Content-Type': 'application/json;charset=utf-8'
                //},
                data: ""
            };
  $http(req);

Answer 3

I face the same issue, while setting the headers. we need to send data parameter in the $http request like this

$http({
    method: 'POST',
    headers: { 'Content-Type': 'application/json},
    data: {},
    url: url
}); 

we can send blank data also. it will work fine.

Answer 4

My problem was that I was setting the data variable to an object instead of a string.

return $http({
    method: 'POST',
    //withCredentials:true,
    headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
    data: {'key1':'value1', 'key2':'value2'},
    url: url
});

Once I changed it to data:'key1=value1&key2=value2' it worked fine. There was also a backslash in there that I had to manually put in the %5c code for.

Answer 5

Than you very much "Liran B " your fix worked like a champ for me.... issue was bugging me from several hours....

var req = {
                method: 'GET',
                url: '<your url here>',
                //headers: {
                //    'Content-Type': 'application/json;charset=utf-8'
                //},
                data: ""
            };

  $http(req);