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 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?

Possible duplicate of [Angular, content type is not being sent with $http](http://stackoverflow.com/questions/16194442/angular-content-type-is-not-being-sent-with-http) — Kristján, Dec 15 '15 at 15:52

score 11 · Accepted Answer · edited May 23 '17 at 11:54

11

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?

edited May 23 '17 at 11:54

Community

1
1

answered Jul 22 '14 at 19:40

lucuma

18,247
4
66
91

1

Yeah, thanks. I realize that now. The header shows up when I pass some data. Still getting a `400 Bad Request`, though. So I guess the question is answered, but I'm still getting the same response. Not sure what is going on. – user3783608 Jul 22 '14 at 19:47
Your question was about the Content-Type. If you have a separate question about the 400 request, create a new one with the specific code bits (server and client). My guess is you aren't sending the token with the request (in the header???) – lucuma Jul 22 '14 at 19:49
1

I'm sending data and it's still not being set. – AlxVallejo Jan 19 '16 at 17:54

score 7 · Answer 2 · answered Jun 17 '15 at 17:35

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);

score 2 · Answer 3 · edited Mar 14 '17 at 21:43

2

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.

edited Mar 14 '17 at 21:43

Gonzalo.-

12,512
5
50
82

answered Jun 27 '16 at 11:32

Santosh Kanan

21
1

data parameter is compulsory – Santosh Kanan Jun 27 '16 at 11:37

score 1 · Answer 4 · answered Jul 22 '14 at 20:52

1

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.

answered Jul 22 '14 at 20:52

user3783608

857
3
11
20

You can also transofmr it on the request. See the answer with 60 upvotes (5th one down) http://stackoverflow.com/questions/11442632/how-can-i-make-angular-js-post-data-as-form-data-instead-of-a-request-payload – lucuma Jul 22 '14 at 21:07

score 1 · Answer 5 · edited Mar 14 '17 at 21:43

1

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);

edited Mar 14 '17 at 21:43

Gonzalo.-

12,512
5
50
82

answered Aug 12 '15 at 10:05

prashanth yet

249
3
5

Content-Type header not being set with Angular $http

5 Answers5

Linked