How do you submit x-www-form-urlencoded data with Angular $ resource?

Question

I am trying to send a POST request to a server that only accepts x-www-form-urlencoded data.

When I test this on Postman, it works. For example, the preview title looks like this:

  POST /api/signin HTTP/1.1 Host: myproj.herokuapp.com Cache-Control: no-cache Content-Type: application/x-www-form-urlencoded email=joe%40gmail.com&password=1234567 

However, when I launch it from my application, the title viewed in the Chrome console looks like this:

  Remote Address:10.10.10.250:80 Request URL:http://myproj.herokuapp.com/api/signIn Request Method:POST Status Code:400 Bad Request Request Headersview source Accept:application/json, text/plain, */* Accept-Encoding:gzip, deflate Accept-Language:en-US,en;q=0.8 Connection:keep-alive Content-Length:53 Content-Type:application/x-www-form-urlencoded; charset=UTF-8 Host:rapidit.herokuapp.com Origin:http://localhost Referer:http://localhost/rapid/v3/src/app/index/ User-Agent:Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36 Form Dataview parsed {"email":" [e-mail] ","password":"1234567"} 

Obviously, it is not sending data in the correct format.

Here's what it looks like in my Angular factory (with hard-coded input data):

 var LoginResource = $resource("http://myproj.herokuapp.com/api/signIn", {}, { post: { method: "POST", isArray: false, headers: {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'} } }); var loginUser = function (){ return LoginResource.post( { email: " [e-mail] ", password: "1234567" } ).$promise; //this promise will be fulfilled when the response is retrieved for this call }; return loginUser; 

How can I get the data in POST in the required format?

Answer 1

By default, Angular uses application / json and not enough for the header to form the url encoding, you must actually convert the data, you can do this using the transformRequest parameter in the $ resource service. Here is how it looks.

 angular.module("AuthModule") .factory("authResource", ['$resource', 'appSettings', function ($resource, appSettings) { return { login: $resource(appSettings.serverPath + '/Token', null, { loginUser: { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded' }, transformRequest: function (data, headersGetter) { var str = []; for (var d in data) str.push(encodeURIComponent(d) + "=" + encodeURIComponent(data[d])); return str.join("&"); } }, }) } }]); 

P / D: I did not write this. This code was taken from a multiple access course called Angular Front to Back with a web API.

Answer 2

Since angularjs 1.4, you can use $ httpParamSerializer :

 function transformUrlEncoded(data) { return $httpParamSerializer(parameters); } ... $resource('http://myproj.herokuapp.com/api/signIn', {}, { post: { method: "POST", headers: {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}, transformRequest: transformUrlEncoded } }); 

Answer 3

I had a similar problem. The AngularJS $ resource service places data in JSON format by default, i.e. if you check the Content-type header in the request, you will see Content-type: application/json .

In my case, my server can process this useful data, but found a Google thread that can help in your case.

Answer 4

This is a very good way to communicate with Symfony forms for AngularJS:

Thanks for s1moner3d for the tip

 class AngularForm { constructor($scope, $http, $httpParamSerializerJQLike) { 'ngInject'; this.http = $http; this.input= ''; this.$httpParamSerializerJQLike = $httpParamSerializerJQLike; } sendForm(){ let conf = { method: 'POST', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, url: '/api/input', data: this.$httpParamSerializerJQLike({'name_of_form': {'input':this.input}}), } this.http(conf).then( (response)=>{ //success }, (response)=> { //error :( }); } }