Http Post 的 Typescript 和 Angular 问题的新手答案

【问题标题】：New to Typescript & Angular problems with Http PostHttp Post 的 Typescript 和 Angular 问题的新手
【发布时间】：2018-01-28 16:00:09
【问题描述】：

我是 Angular 和 Typescript 的新手，我尝试创建一个简单的登录页面。我在打字稿中创建了一个服务，当用户按下“登录”按钮时会调用该服务。包含用户名和密码的文本框已正确绑定到模型，但是当我将请求发送到用 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);
});

这是我的打字稿代码

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 标头或 Http Post 的格式有关。。有任何想法吗？

【问题讨论】：

我猜您使用的是 Angular 4.3.4？很难说。我认为您不必 JSON.stringify 您的内容。为什么使用“application/x-www-form-urlencoded”内容类型？
你需要什么邮递员令牌来设置它？
@ChrisY 根据我的 package.json，@angular/core 设置为 ^4.2.4，根据我的理解，这意味着“全部高于此版本”？有没有其他具体的方法来检查版本？谢谢！
您需要自己将其序列化为字符串。使用URLSearchParams。如果您需要答案，请告诉我
猜猜看。您可以尝试使用 'let content = username=${userame}&password=${password};见：stackoverflow.com/questions/39863317/…

标签： node.js angular typescript

【解决方案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(..)

【讨论】：

@TobiasMoeThorstensen，因为你是新人，所以快速思考一下，尝试使用新的 HttpClient 而不是 http，它在 Angular 最新版本中已被弃用
感谢您的提醒！至少它在我的 C# 代码中中断，但是当返回到打字稿代码时，它给了我这个错误：错误响应 {_body: ProgressEvent, status: 0, ok: false, statusText: "", headers: Headers, ...} _body: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, ...} headers:Headers {_headers: Map(0), _normalizedNames: Map(0)} ok:false status:0 statusText:"" type:3 url:null proto:Body {constructor: , toString: }