net::ERR_INVALID_HTTP_RESPONSE error after post request with Angular 7

Question

I am working on small web application and I am using angular 7 and asp.net core web api as a back end. I am trying to make http post request with angular. My service returns string (token) and when I receive it, I want to show it in alert box.

I have tested my service with Postman and everything works as expected.

From the browser my request is successfully mapped to the controller's action method. I have set breakpoint in this method body and it successfully returns token without any problem.

But httpclient returns error:

[object Object]

And in the browser console I see this:

POST https://localhost:44385/api/auth net::ERR_INVALID_HTTP_RESPONSE

I have two methods (for POST and for GET) in a service class injected into component. They look like these:

logIn(username: string, password: string) {

    const encodedCredentials = btoa(username + ':' + password);

    const httpOptions = {
        headers: new HttpHeaders({
            "Authorization": "Basic " + encodedCredentials,
            "Access-Control-Allow-Origin":"*"
        }),
        responseType: 'text' as 'text'
    };

    this.http.post(this.urlBase + 'auth', null , httpOptions)
    .subscribe(result => {
        alert(result);
    }, error => {
        alert(error); // [object Object]
    });
}

get(){
    return this.http.get(this.urlBase + 'auth', {responseType: 'text'});
}

What can be problem?

Update:

HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}
error: ProgressEvent
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: XMLHttpRequest {__zone_symbol__xhrSync: false, __zone_symbol__xhrURL: "https://localhost:44385/api/auth", __zone_symbol__loadfalse: null, __zone_symbol__errorfalse: null, __zone_symbol__xhrListener: ƒ, …}
defaultPrevented: false
eventPhase: 0
isTrusted: true
lengthComputable: false
loaded: 0
path: []
returnValue: true
srcElement: XMLHttpRequest {__zone_symbol__xhrSync: false, __zone_symbol__xhrURL: "https://localhost:44385/api/auth", __zone_symbol__loadfalse: null, __zone_symbol__errorfalse: null, __zone_symbol__xhrListener: ƒ, …}
target: XMLHttpRequest {__zone_symbol__xhrSync: false, __zone_symbol__xhrURL: "https://localhost:44385/api/auth", __zone_symbol__loadfalse: null, __zone_symbol__errorfalse: null, __zone_symbol__xhrListener: ƒ, …}
timeStamp: 80234.59999999614
total: 0
type: "error"
__proto__: ProgressEvent
headers: HttpHeaders
headers: Map(0) {}
lazyUpdate: null
normalizedNames: Map(0) {}
__proto__: Object
message: "Http failure response for (unknown url): 0 Unknown Error"
name: "HttpErrorResponse"
ok: false
status: 0
statusText: "Unknown Error"
url: null
__proto__: HttpResponseBase

Update 2:

Request with Postman:

---

Update 3: trying to get token several times showed that sometimes post request is successfull and sometimes not...

Answer 1

In ASP.NET Core 2.2, we released a new Server which runs inside IIS for Windows scenarios. The issue you are running into looks like: https://github.com/aspnet/AspNetCore/issues/4398.

When sending the XMLHttpRequest, there is a preflight OPTIONS request which returns a status code of 204. This was incorrectly handled by the IIS server, returning an invalid response to the client.

In your ASP.NET Core application, can you please try the workaround for now:

app.Use(async (ctx, next) =>
{
  await next();
  if (ctx.Response.StatusCode == 204)
  {
    ctx.Response.ContentLength = 0;
  }
});

in the beginning of Configure method.

This will also be fixed in the next patch release of ASP.NET Core. I will follow up when the patch is released.

Edit: The latest release (2.2.1) should address this problem: https://dotnet.microsoft.com/download/dotnet-core/2.2. Please try and see if the issue is resolved.

Answer 2

I figured out where the problem is located. It's on the server side. Did you use ASP.NET Core 2.2 ? After downgrading to 2.1, it's finally working !

<Project Sdk="Microsoft.NET.Sdk.Web">

  <PropertyGroup>
    <TargetFramework>netcoreapp2.1</TargetFramework>
    <AspNetCoreHostingModel>InProcess</AspNetCoreHostingModel>
  </PropertyGroup>

  <ItemGroup>
    <PackageReference Include="Microsoft.AspNetCore.App" Version="2.1.0"/>
    <PackageReference Include="Microsoft.AspNetCore.Razor.Design" Version="2.1.0" PrivateAssets="All" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.Design" Version="2.1.0" />
    <PackageReference Include="Microsoft.EntityFrameworkCore.Tools" Version="2.1.0" />
    <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="2.1.0" />
  </ItemGroup>

  <ItemGroup>
    <DotNetCliToolReference Include="Microsoft.EntityFrameworkCore.Tools.DotNet" Version="2.0.0" />
  </ItemGroup>
</Project>

But I can't understand why. The only thing that changed is in one header, the Server header. It changed from Microsoft-IIS/10.0 (2.2) to Kestrel (2.1)