Как вы отправляете данные x-www-form-urlencoded с Angular $resource?

Question

Я пытаюсь представить POST запрос к серверу, который принимает только данные в x-www-form-urlencoded формат.

Когда я проверяю это на Почтальоне, это работает. Например, заголовок предварительного просмотра выглядит так:

    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

Однако, когда я запускаю его из своего приложения, заголовок, если смотреть в консоли Chrome, выглядит следующим образом:

    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"}

Очевидно, что это не отправка данных в правильном формате.

Вот как это выглядит на моей фабрике Angular (с жестко закодированными данными для входа):

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;

Как я могу получить данные для POST в необходимом формате?

Answer 1

По умолчанию Angular использует application/json, и недостаточно установить заголовок для кодирования формы url, вам нужно фактически преобразовать данные, это можно сделать с помощью параметра de transformRequest в службе $resource. Вот как это выглядит.

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: я не писал это. Этот код был взят из курса множественного взгляда, который называется Angular Front to Back с Web API.

Answer 2

Начиная с angularjs 1.4, вы можете использовать $ 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

У меня была похожая проблема, служба ресурсов AngularJS $ по умолчанию отправляет данные в формате JSON, т.е. если вы проверите заголовок Content-type в запросе, который увидите Content-type: application/json,

В моем случае мой сервер может обрабатывать эти полезные данные, но нашел поток Google, который может помочь в вашем случае.

Answer 4

Это очень хороший способ связи с формами Symfony для AngularJS:

Спасибо за s1moner3d за подсказку

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 :(
    });

}

}