Build a CRUD App with ASP.NET Core and Angular - API call from JogginDiary TIMES OUT


#1

HI All

I finished creating the Build a CRUD App with ASP.NET Core and Angular from your article

However when I ng serve my JogginDiary app, I log fine, but it doesn’t load the initial record I created using POSTMAN.

Looking at google debug (F12) i can see the workouts API call just stays in a pending state => Request URL:

localhost:44373/api/workouts

And then the connection times out =>

OPTIONS localhost:44373/api/workouts net::ERR_CONNECTION_RESET

ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}

The full error:-

  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 (unknown url): 0 Unknown Error”
  4. name: “HttpErrorResponse”
  5. ok: false
  6. status: 0
  7. statusText: “Unknown Error”
  8. url: null
  9. proto: HttpResponseBase

Strange as https://localhost:44373/api/workouts (GET) works fine, when ran on its own in google browser, but above is the POST and is not working from within the JogginDiray Angular ap.

I added Access-Control-Allow-Origin to headers:-
this.headers = new HttpHeaders({ ‘Content-Type’: ‘application/json; charset=utf-8’, ‘Access-Control-Allow-Origin’: ‘*’ });

But still did not help