在 Angular 中发布 urlencoded 表单 5

Question

我正在尝试使用 Spring 后端和 Angular 5 前端开发应用程序。对于登录，我使用的是 Spring 安全性，在前端，我试图将登录数据 post 作为 x-www-form-urlencoded。但是，后端收到的用户名和密码均为空。 HttpClient 的 Angular5 文档仅提供 posting json 数据的示例，Http 已弃用。

如有任何关于如何解决此问题的建议，我们将不胜感激。

这是我的 Angular 代码：

constructor(public httpClient: HttpClient) {
    console.log('Hello RestService Provider');
}

login(username: string, password: string) {
    var body = 'username=' + username + '&password=' + password + "&remember-me=" +  false;
    var headers = new HttpHeaders();
    headers.append('Content-Type', 'application/x-www-form-urlencoded; charset=utf-8');
    let options = {headers: headers, withCredentials: true};
    this.callPostWithOptions("login", body, options).then(data=>{
      this.getCurrentUser();
    });
}

callPostWithOptions(address, body, options) {
    return new Promise(resolve => {
      address = this._SERVER_HOST + ":" + this._SERVER_PORT + "/" + address;
      this.httpClient.post(address, body, options)
        .subscribe((data) => {
            resolve(data);
          },
          (err) => {
            console.log("error during POST", err)
          });
    });
}

和服务器端点：

@RequestMapping(value = "/login", method = RequestMethod.GET)
@CrossOrigin(origins = "*")
public ModelAndView handle() {
    return new ModelAndView("/app/userOverview");
}

编辑：我忘了说，当我用 Postman 测试它时它没有问题

Answer 1

新的 HTTPClient 模块仅适用于不可变类型。这意味着 headers 和 params 不能被修改。 append()操作实际上是returns复制你的原件，加上header.

let headers = new HttpHeaders();
headers.append('...','...');// <- doesn't change the original object, but creates a new one!

相反，您想捕获返回的 object:

let headers = new HttpHeaders();
headers = headers.append('...','...');

作为旁注，我会更改 callPostWithOptions 以使用 toPromise() operator:

callPostWithOptions(address, body, options) {
   address = '...';
   return this.httpClient.post(address, body, options).toPromise();
}

在 Angular 中发布 urlencoded 表单 5

Posting form-urlencoded in Angular 5

rest

spring

urlencode

angular