node.js - Typescript 新手和 Angular 的 Http Post 问题

Question

我是 Angular 和 Typescript 的新手，我尝试创建一个简单的登录页面。我在 typescript 中创建了一个服务，当用户按下“登录”按钮时会调用该服务。包含用户名和密码的文本框已正确绑定(bind)到模型，但是当我将请求发送到用 C# 编写的后端时，它不会命中断点，我怀疑这是因为在线发送的消息的格式所致。

因此，使用 PostMan，我能够调用该服务并获取 access_token 当将请求导出到 PostMan 中的代码时，NodeJS 变体如下所示:

var request = require("request");

var options = { method: 'POST',
  url: 'http://localhost:8081/login',
  headers: 
   { 'postman-token': '34dd4d0f-ff16-db4f-ebae-dab945729410',
     'cache-control': 'no-cache',
     'content-type': 'application/x-www-form-urlencoded' },
  form: { username: 'test', password: 'test', grant_type: 'password' } };

request(options, function (error, response, body) {
  if (error) throw new Error(error);

  console.log(body);
});

这是我的 Typescript 代码

login(userName: string, password:string) : Observable<boolean> {

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

        var content = JSON.stringify({
            username: userName, 
            password: password,
            grant_type: this.grant_type
        });

        return this.http.post(this.authenticationEndpoint, content, {headers: headers})
                .map((response:Response) =>  {

                    let token = response.json() && response.json().token;
                    if(token){
                        //this.token = token;
                        localStorage.setItem('user', JSON.stringify({userName: userName, token:token}));
                        return true;
                    }

                    return false;
                });        
    }

这会导致 Visual Studio Code 中出现错误，其中显示:

我不太确定应该如何解释这个错误消息，但由于我的 web 服务中的方法没有被调用，我很确定它与 HTTP header 或 Http Post 的格式有关。有什么想法吗？

Answer 1

使用 URLSearchParams 作为请求正文，Angular 会自动将内容类型设置为 application/x-www-form-urlencoded

import { URLSearchParams } from "@angular/http"

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


this.http.post(this.authenticationEndpoint, body).map(..)