In my Angular 10 app I'm sending a get request with a token in its header to ApiGateway. ApiGateway is responsible for redirecting the request to the right service in my backend.
I'm trying to handle a case where the token that is sent isn't valid. In this case the backend should return error 401 - Unauthorized Access. ApiGateway converts the 4XX errors from my backend to 302 response and should redirect the customer to the login page.
However, the browser of the customer isn't redirected and I'm getting server return code 0 :
Server returned code : 0, error message is : Http failure response for https://orig-api-url: 0 Unknown Error
The following function used for capturing http errors:
private handleError(err: HttpErrorResponse) {
let errorMessage = '';
if (err.error instanceof ErrorEvent) {
errorMessage = `An error occurred : ${err.error.message}`;
} else {
errorMessage = `Server returned code : ${err.status}, error message is : ${err.message}`;
}
console.error(errorMessage);
return throwError(errorMessage);
}
I understand that the browser does the redirection for me but why the client's browser isn't redirected? When I send the api request directly via the browser (and not via my Angular app) I'm redirected successfully.
In my network trace I see both the orig api request and the redirection response that returns text/html
and status 200. Then why does my Angular app receives status code 0 (CORS issue maybe?) ? Do I need to handle it somehow in the code ?
The following solution suggested to return to the customer the 401 error and then handle the redirect (router navigate) in the code. I don't want to replace the 302 because I want to redirect users without token to the login page.