angular2发布不良参数

Question

我正在开发一个与Yandex Translate API进行通信的Angular2应用程序。

我发送带有http的POST请求时出现问题，但它适用于jQuery.ajax。

我的代码：

var url = "https://translate.yandex.net/api/v1.5/tr.json/translate";
    var key = "API_KEY";

    var fromTo = this.from + '-' + this.to;

    var data = {
        text: this.typedText,
        key : key,
        lang: fromTo
    };

使用jQuery：

    $.ajax({
        type: "POST",
        url: url,
        data: data,
        success: $.proxy(function (data) {
            this.result = data.text;
        }, this),
        error: $.proxy(function () {
            Materialize.toast('One language is not supported by Yandex.', 3000)
        }, this),
    });

并使用angular2 http.post：

    this.http.post(url, JSON.stringify(data))
        .map(res => res.text())
        .subscribe(
            data  => this.result = data.text,
            error => this.displayError('One language is not supported by Yandex.')
        );

jQuery和http响应之间的差异截图：

感谢您的帮助

更新1：更改标题

var headers = new Headers();
    headers.append('Content-Type', 'application/x-www-form-urlencoded');

    this.http.post(url, JSON.stringify(data), {
            headers :headers
    })
    .map(res => res.text())
    .subscribe(
        data  => this.result = data.text,
        error => this.displayError('One language is not supported by Yandex.')
    );

Answer 1

使用jQuery，您可以将url编码数据用于有效负载，使用JSON用于Angular2。

您需要手动创建有效负载，而不是使用stringify方法。这样的事情：

let headers = new Headers();
headers.append('Content-type ', 'x-www-form-urlencoded');

http.post('http://...', 'key=something&text=value&lang=en',
    { headers: headers });

希望它可以帮到你， 亨利