Nativescript-angular http post请求不工作&没有错误消息

Question

因此，我正在为我正在构建的应用程序创建一个登录屏幕。我已经构建并测试了登录API，它在一个普通的web应用程序中运行良好。然而，在我的angular-nativescript项目中，它根本不起作用，我不知道为什么。我认为原因是因为它没有执行post请求(因为我在函数中有控制台日志，但我看不到它们，我只看到错误的控制台日志)

我已经在postman中测试过了，它工作了，它通过ngModel获取用户输入的数据，并通过post请求发送数据，但我不确定在那之后会发生什么。

我还更新了API URL，以便它可以与本地托管的api一起工作(我已经测试了API是否通过应用程序其他部分中的get请求工作，所以这不是问题)

我附上了一张我的屏幕图像，这样你就可以在控制台中看到我正在做的事情和响应。我还附上了postman中实际响应的图像(它应该返回一个令牌字符串)

​

这是代码(这是类似于angular web应用程序中的代码，它在那里工作)：

login.component.html

<StackLayout class="form">
  <StackLayout class="input-field">
    <TextField [(ngModel)]='username'></TextField>
  </StackLayout>

  <StackLayout class="input-field">
    <TextField [(ngModel)]='password'></TextField>
  </StackLayout>

  <Button text="Log In" class="btn btn-primary" (tap)="login()"></Button>
</StackLayout>

loggedInService.ts：(不确定这是否会有帮助，但这里是我对HTTP和RXJS的导入)：

import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

login(model: any) {
    return this.http.post(this.baseUrl + 'login', model)
        .pipe(
            map((response: any) => {
                console.log(response)
                const user = response;
                if (user) {
                    this.un = user.username;
                    console.log('USER = ', this.un);
                }
            })
        );
}

login.component.ts

username: any
password: any


login() {
    let model = {
        "username": this.username,
        "password": this.password
    }
    console.log(JSON.stringify(model))
    this.loggedInService.login(model).subscribe(next => {
        console.log('Logged in successfully');
    }, error => {
        console.log('Failed to login');
    });
}

编辑

经过更多的测试，这可能是一个API问题。我不确定是不是，但是当我从postman发送请求时，我从API得到了不同的响应，而当我从nativescript发送请求时，我得到了不同的响应。该应用编程接口是使用.net核心构建

在下面的响应中，它说

Connection id "0HLT9HL1GMPV1" bad request data: "Invalid request line: '\x16\x03\x01\x00\xFB\x01\x00\x00\xF7\x03\x03\x82`\xB2\x9Ex\x09`\x16\x0A'"

这是否意味着我发送了错误类型的信息？

在控制台中，当通过原生脚本应用程序向API发送post请求时，这是响应

info: Microsoft.AspNetCore.Server.Kestrel[17]
      Connection id "0HLT9HL1GMPV1" bad request data: "Invalid request line: '\x16\x03\x01\x00\xFB\x01\x00\x00\xF7\x03\x03\x82`\xB2\x9Ex\x09`\x16\x0A'"
Microsoft.AspNetCore.Server.Kestrel.Core.BadHttpRequestException: Invalid request line: '\x16\x03\x01\x00\xFB\x01\x00\x00\xF7\x03\x03\x82`\xB2\x9Ex\x09`\x16\x0A'
   at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpParser`1.RejectRequestLine(Byte* requestLine, Int32 length)
   at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpParser`1.GetUnknownMethod(Byte* data, Int32 length, Int32& methodLength)
   at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpParser`1.ParseRequestLine(TRequestHandler handler, Byte* data, Int32 length)
   at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpParser`1.ParseRequestLine(TRequestHandler handler, ReadOnlySequence`1& buffer, SequencePosition& consumed, SequencePosition& examined)
   at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpParser`1.Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.IHttpParser<TRequestHandler>.ParseRequestLine(TRequestHandler handler, ReadOnlySequence`1& buffer, SequencePosition& consumed, SequencePosition& examined)
   at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.Http1Connection.TakeStartLine(ReadOnlySequence`1 buffer, SequencePosition& consumed, SequencePosition& examined)
   at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.Http1Connection.ParseRequest(ReadOnlySequence`1 buffer, SequencePosition& consumed, SequencePosition& examined)
   at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.Http1Connection.TryParseRequest(ReadResult result, Boolean& endConnection)
   at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpProtocol.ProcessRequests[TContext](IHttpApplication`1 application)
   at Microsoft.AspNetCore.Server.Kestrel.Core.Internal.Http.HttpProtocol.ProcessRequestsAsync[TContext](IHttpApplication`1 application)

这是我用postman发送请求时的结果。

info: Microsoft.AspNetCore.Hosting.Internal.WebHost[1]
      Request starting HTTP/1.1 POST http://localhost:5000/api/auth/login application/json 49
info: Microsoft.AspNetCore.Authentication.JwtBearer.JwtBearerHandler[1]
      Failed to validate the token.
Microsoft.IdentityModel.Tokens.SecurityTokenExpiredException: IDX10223: Lifetime validation failed. The token is expired. ValidTo: '09/15/2019 15:46:17', Current time: '02/04/2020 16:22:25'.  
   at Microsoft.IdentityModel.Tokens.Validators.ValidateLifetime(Nullable`1 notBefore, Nullable`1 expires, SecurityToken securityToken, TokenValidationParameters validationParameters)
   at System.IdentityModel.Tokens.Jwt.JwtSecurityTokenHandler.ValidateLifetime(Nullable`1 notBefore, Nullable`1 expires, JwtSecurityToken jwtToken, TokenValidationParameters validationParameters)
   at System.IdentityModel.Tokens.Jwt.JwtSecurityTokenHandler.ValidateTokenPayload(JwtSecurityToken jwtToken, TokenValidationParameters validationParameters)
   at System.IdentityModel.Tokens.Jwt.JwtSecurityTokenHandler.ValidateToken(String token, TokenValidationParameters validationParameters, SecurityToken& validatedToken)
   at Microsoft.AspNetCore.Authentication.JwtBearer.JwtBearerHandler.HandleAuthenticateAsync()
info: Microsoft.AspNetCore.Authentication.JwtBearer.JwtBearerHandler[7]
      Bearer was not authenticated. Failure message: IDX10223: Lifetime validation failed. The token is expired. ValidTo: '09/15/2019 15:46:17', Current time: '02/04/2020 16:22:25'.
info: Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker[3]
      Route matched with {action = "Login", controller = "Auth"}. Executing controller action with signature System.Threading.Tasks.Task`1[Microsoft.AspNetCore.Mvc.IActionResult] Login(cartalk.api.Dtos.users.UserForLoginDto) on controller cartalk.api.Controllers.AuthController (cartalk.api).
info: Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker[1]
      Executing action method cartalk.api.Controllers.AuthController.Login (cartalk.api) - Validation state: Valid
info: Microsoft.EntityFrameworkCore.Infrastructure[10403]
      Entity Framework Core 2.1.11-servicing-32099 initialized 'DataContext' using provider 'Microsoft.EntityFrameworkCore.Sqlite' with options: None
info: Microsoft.EntityFrameworkCore.Database.Command[20101]
      Executed DbCommand (0ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
      PRAGMA foreign_keys=ON;
info: Microsoft.EntityFrameworkCore.Database.Command[20101]
      Executed DbCommand (0ms) [Parameters=[@__username_0='?' (Size = 5)], CommandType='Text', CommandTimeout='30']
      SELECT "x"."Id", "x"."Bio", "x"."Email", "x"."Followers", "x"."Following", "x"."PasswordHash", "x"."PasswordSalt", "x"."Username", "x"."isAdmin"
      FROM "Users" AS "x"
      WHERE "x"."Username" = @__username_0
      LIMIT 1
info: Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker[2]
      Executed action method cartalk.api.Controllers.AuthController.Login (cartalk.api), returned result Microsoft.AspNetCore.Mvc.OkObjectResult in 2.0925ms.
info: Microsoft.AspNetCore.Mvc.Infrastructure.ObjectResultExecutor[1]
      Executing ObjectResult, writing value of type '<>f__AnonymousType0`1[[System.String, System.Private.CoreLib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=7cec85d7bea7798e]]'.        
info: Microsoft.AspNetCore.Mvc.Internal.ControllerActionInvoker[2]
      Executed action cartalk.api.Controllers.AuthController.Login (cartalk.api) in 2.7807ms
info: Microsoft.AspNetCore.Hosting.Internal.WebHost[2]
      Request finished in 3.6262ms 200 application/json; charset=utf-8

这就是我从nativescript应用程序发送请求时要寻找的响应。

Answer 1

我弄清楚了，我发送的post请求有一个问题，我认为它在本地脚本- angular中的工作方式与在常规angular中的工作方式不同。API中也没有错误

这是新的工作代码，以防其他人遇到这个问题：

html

<StackLayout class="form">
  <StackLayout class="input-field">
    <TextField [(ngModel)]='model.username'></TextField>
  </StackLayout>

  <StackLayout class="input-field">
    <TextField secure="true" [(ngModel)]='model.password'></TextField>
  </StackLayout>

  <Button text="Log In" class="btn btn-primary" (tap)="submit()"></Button>
</StackLayout>

.ts

model: any = {};

ngOnInit() {
}

public submit() {
    console.log(this.model)
    this.makePostRequest();
}

private makePostRequest() {
    this.loggedInService
        .postData(this.model)
        .subscribe(res => {
            // this.message = (<any>res).json.data.username;
            console.log(res)
        });
}

服务

    private serverUrl = environment.apiUrl + 'auth/login';

    postData(data) {
        let options = this.createRequestOptions();
        return this.http.post(this.serverUrl, data, { headers: options });
    }

    private createRequestOptions() {
        let headers = new HttpHeaders({
            "Content-Type": "application/json"
        });
        return headers;
    }