Geek Answers Handbook

Content-Type header not set with Angular $ http

I am trying to make a POST request for cross origin 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 OPTIONS preset request receives 200 OK , but the subsequent POST receives a 400 Bad Request response. If I look at the trace in the Chrome debugging window, I don’t see the Content-Type: application/x-www-form-urlencoded; charset=UTF-8 header Content-Type: application/x-www-form-urlencoded; charset=UTF-8 Content-Type: application/x-www-form-urlencoded; charset=UTF-8 for POST. I assume that is why the server returns a Bad Request response.

I set some other custom headers that I skipped from the above code, and they are sent and displayed well.

It should also be mentioned that I can make this request using the Advanced Rest Client application for Chrome and get the correct answer. (Access token)

I also tried just executing XMLHttpRequest (), but I am getting the same errors.

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

+7
angularjs cors
source share
5 answers

I am not sure if the Content-Type header will be sent if you DO NOT send any data. Add a data object and try:

 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 message, you use data instead of params (get).

You can also refer to this SO question, which has more information on how to convert data if you need to: How to send data as form data instead of asking for a payload?

+11
source

The header 'Content-Type' is not added to the request, if the data property is undefined, you can send an 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);
+7
source

My problem was that I was setting the data variable for 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 });

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

+1
source

I am facing the same problem when setting up the headers. we need to send the data parameter to the $http request like this

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

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

+1
source

The more you "Liran B", your fix works like a champion for me .... the question pushed me from several hours ....

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

More articles:


All Articles