如何使用x-www-form-urlencoded强制Angular2进行POST

Question

我有一个项目需要使用Angular2（最终版本）发布到旧的，旧的Tomcat 7服务器，该服务器使用.jsp页面提供某种类似于REST的API。

当项目只是一个执行AJAX请求的简单JQuery应用程序时，此方法就可以很好地工作。但是，该项目的范围已经扩大，因此需要使用更现代的框架来重写它。Angular2看起来很适合这项工作，但有一个例外：它拒绝使用任何选项来执行POST请求，但要使用的表单数据是API不会提取的任何形式。该API希望所有内容都采用urlencode，依靠Java的request.getParameter("param")语法来提取各个字段。

这是从我的user.service.ts中摘录的：

import { Injectable }    from '@angular/core';
import { Headers, Response, Http, RequestOptions } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';

@Injectable()
export class UserService {
    private loggedIn = false;
    private loginUrl = 'http://localhost:8080/mpadmin/api/login.jsp';
    private headers = new Headers({'Content-Type': 'application/x-www-form-urlencoded'});

    constructor(private http: Http) {}

    login(username, password) {
        return this.http.post(this.loginUrl, {'username': username, 'password':  password}, this.headers)
            .map((response: Response) => {
                let user = response.json();
                if (user) {
                    localStorage.setItem('currentUser', JSON.stringify(user));
                }
            }
        );
    }
}

不管我将标头内容类型设置为什么，它总是以非编码形式的数据形式到达。它不符合我设置的标题。

有人遇到过这种情况么？如何迫使Angular2以旧Java API可以使用读取的格式发布数据request.getParameter("param")？

编辑 ：对于以后发现此问题的其他人，解决方案实际上非常简单。像这样设置帖子的正文：

let body = `username=${username}&password=${password}`;`

请参阅下面的Brad示例。

Answer 1

您可以将其URLSearchParams用作请求的正文，并且angular将自动将内容类型设置为application/x-www-form- urlencoded并正确编码正文。

let body = new URLSearchParams();
body.set('username', username);
body.set('password', password);

this.http.post(this.loginUrl, body).map(...);

目前无法使用的原因是，您未以正确的格式编码正文数据，并且未正确设置标题选项。

您需要像这样对主体进行编码：

let body = `username=${username}&password=${password}`;

您需要像这样设置标题选项：

this.http.post(this.loginUrl, body, { headers: headers }).map(...);