I am unable to have a connection from my angular frontend to my C# backend. What is the reason for this?

Question

I'm writing an angular application. The main problem I have right now is that when I have to connect my frontend application with my backend server that it's unable to do so and that I get error 0. I have also uploaded another application that returns a similar error. Given that error 0 indicates that the problem could be literally anything I would like to know what causes the problem.

As far as I know the problem can't be there because of my backend not properly working. That's because my application runs with Swagger and Swagger doesn't have any notable problem with returning code that has been parsed in JSON.

Thus it must be my frontend. However that's also unlikely, because it works well until it has to connect to the backend. (In my code, that would be until class authentication.service.ts line 64 for checking the username and until authentication.service.ts line 40 for registering a user).

I've already asked my Norton antivirus to stop doing anything to see if my application is not working due to my antivirus, but it turns out that my antivirus wasn't doing anything to stop my frontend from connecting to my backend.

If some code is running wrong it has to be code in this method:

checkUserNameAvailability = (username: string): Observable<boolean> => {
    //    console.log(username);
    return this.http.get<boolean>(
      `${environment.apiUrl}/User/checkusername`,
      {
        params: { username }
      }
    ).pipe(catchError(err => {
      console.error(err);
      return of(null);
    }))
  }

This is code in authentication.service.ts from line 62 until line 73.

I'll link to my github repositories below:

Angular frontend: https://github.com/GuylianBollon/AngularFrontendWebIV C# backend: https://github.com/GuylianBollon/CbackendWebIV

Here's another thing I found: After I connect my angular frontend to my C# backend and directly after it check the connection on the command prompt the following is generated. (Note: 44392 is the SSL Port of my C# backend).

C:\Users\Hp>netstat -a -n | findstr 44392
  TCP    0.0.0.0:44392          0.0.0.0:0              LISTENING
  TCP    [::]:44392             [::]:0                 LISTENING
  TCP    [::1]:44392            [::1]:53942            ESTABLISHED
  TCP    [::1]:53942            [::1]:44392            ESTABLISHED

After I wait for about 1 minute the following is generated:

C:\Users\Hp>netstat -a -n | findstr 44392
  TCP    0.0.0.0:44392          0.0.0.0:0              LISTENING
  TCP    [::]:44392             [::]:0                 LISTENING
  TCP    [::1]:53942            [::1]:44392            TIME_WAIT

Not sure if this is normal or not, but I thought this was interesting.

Here's also the json of my proxy.conf.json file:

{
  "/api": {
    "target": {
      "host": "localhost",
      "protocol": "https",
      "port": 44392
    },
    "changeOrigin": true,
    "secure": false,
    "logLevel": "warn"
  }
}

When I open the browser after I connect my angular frontend to my C# backend, write something on the username field and wait 2 minutes the following is generated:

authentication.service.ts:70 1. HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "/api/User/checkusername", ok: false, …} 1. error: ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: "error", …} 2. headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)} 3. message: "Http failure response for /api/User/checkusername: 0 Unknown Error" 4. name: "HttpErrorResponse" 5. ok: false 6. status: 0 7. statusText: "Unknown Error" 8. url: "/api/User/checkusername" 9. proto : HttpResponseBase

api/User/checkusername?username=abc:1 Failed to load resource: net::ERR_EMPTY_RESPONSE

Answer 1

There is a typo in your proxy configuration file, a fixed version:

{
  "/api": {
    "target": {
      "host": "localhost",
      "protocol": "https:",
      "port": 44392
    },
    "changeOrigin": true,
    "secure": false,
    "logLevel": "warn"
  }
}

Notice the colon (:) after https: , which is missing in your version.