Question

我是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);
});

这是我的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出错：

我不确定如何解释此错误消息，但由于我的webservice中的方法未被调用，因此我非常确定它与HTTP标头或格式有关。 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(..)

新手稿和＆amp; Http Post的角度问题

1 个答案: