Angular Http Error status missing

Question

I'm using an Http client wich is an extended version from Angular 4's Http Client

export class SecurityClient extends Http {
// ...
}

In this client I have methods that attempt calls against an api and I want to catch 401 status to try a refresh token.

I have an implementation like this:

get(url: string, options?: RequestOptionsArgs): Observable<Response> {
        return super.get(url, this._getOptions(options)).catch((initialError: any) => {
            console.log('error: ' + JSON.stringify(initialError));
            if (initialError && initialError.status === 401) {
                return this.authService.doRefreshTokenObservable().flatMap((ok) => {
                    if (ok) {
                        return super.get(url, this._getOptions(options));
                    } else {
                        return Observable.throw('Authentication error');
                    }
                });
            } else {
                return Observable.throw(initialError);
            }
        });
    }

Pretty much similar like angular recommends in its page (https://angular.io/docs/ts/latest/guide/server-communication.html)

But for some reason, the first console.log shows something like:

error: {"_body":{"isTrusted":true},"status":0,"ok":false,"statusText":"","headers":{},"type":3,"url":null}

And I'm unable to get status code at all.

Why is it happening? It's due I'm extending Httpclient and I did something wrong? Even I'm getting this weird status:0, console also shows with red letters:
"No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access. The response had HTTP status code 401." (we have the CORS well configured, if token has not expired I retrieve the information successfully)

Hey Did you solve the problem? I am also facing the same problem.How did you solve the problem? — , Feb 14 '18 at 11:06
Hey! Yes, At the end it was what the answer marked as good said, it was a CORS issue. Since the CORS was triggering, Angular was unable to read its error status. I've also found that for this particular case, firefox console output was clearer than Chrome. Hope it helps, feel free to ask anything more if needed! — Pau Mascarell, Feb 15 '18 at 16:26
add this line into my app/index.hmtl. [main discussion](https://stackoverflow.com/questions/45259804/ionic-2-cordova-http-error) — Ethan Amara, Aug 19 '18 at 05:32

score 3 · Accepted Answer · answered May 10 '17 at 16:44

3

First, you may want to double check your CORS config on the server. I know, I know, you said you've got it well configured, and I believe you because I've gone through this rigamarole myself. But the CORS response is entirely from the server and shouldn't have anything to do with your AngularJS. I've personally seen Django setups where each response method had it's own CORS configuration, so it's possible that an unauthenticated request is given nothing, including permissions to even make the Cross Origin Request.

Second, as far as the error code, my first thought is that the server side code that is generating the response should be reviewed. I've never seen Angular return a response code that wasn't straight from the server (which hey, I haven't seen everything). My assumption is that there is perhaps a default status code, or a misconfigured variable that is being returned from the server.

tl;dr: It seems like both problems, CORS and status: 0 are the fault of something on the server.

answered May 10 '17 at 16:44

TristanZimmerman

606
8
12

But why then in console shows the status code 401? I will check tomorrow if backend (made with spring) has some responsability but I doubt it... Thanks for answering anyway! – Pau Mascarell May 10 '17 at 16:59
Here is an old thread about receiving a status of `0`, especially in the context of a `CORS` denial: http://stackoverflow.com/questions/10909807/response-code-0-getting-json-from-a-website It does sound like the headers are set correctly, but the JSON response itself may not be setup to properly pull in that response code. Here's an example where the response data from an app doesn't match the headers, though the headers are correct and everything (which is what I'm guessing is happening): https://github.com/typhoeus/typhoeus/issues/411. – TristanZimmerman May 10 '17 at 23:23
I finally see, it was, as you said, that when 401 was triggered the cors was not being effective. As an aditional note I would like to remark that Chrome outputs may misslead a lot, I found firefox's outputs clearer. Thanks! – Pau Mascarell May 11 '17 at 08:28
That's great to hear! Also, thanks for the heads up on Firefox's clearer output. I'm think that will come in handy down the line. – TristanZimmerman May 11 '17 at 18:48

score 0 · Answer 2 · answered Jul 15 '17 at 08:40

0

Two days of debugging and in my case the answer were adding a backslash to the end of the URL.

website.com/api/create_user

Didn't work...

website.com/api/create_user/

Worked!!!!

answered Jul 15 '17 at 08:40

O. Edholm

2,044
2
12
13

Angular Http Error status missing

2 Answers2