Angular 5 not handling 301 responses properly in firefox

Question

I am building this web application in Angular that communicates with a REST api. Sometimes, when the front end requests some data via GET to a certain url, the server does not return a 200 OK immediately but throws a 301 response instead. Chrome handles this 301 properly and makes a subsequent request to the url returned in the response headers. Here is a screenshot of the sequence of requests thrown in Chrome:

Notice there is a preflight request prior to every actual request, since I'm working with CORS.

Now, when I try this in Firefox (and I believe Edge is probably showing the same problem), this is what I get in the network inspect:

The browser won't even try to GET the resource that is being returned in the 301 response, so the actual data never gets to the front end and my forms appear empty.

To add some more information, the back end is running on Django and this test was done on the development server.

Here is a snippet showing how Angular is doing this request (I think is pretty straightforward):

getUser(id: number): Promise<User> {
    return this.http.get('/users/'+id)
        .toPromise()
        .then(data => data as User )
        .catch(this.handleError);
}

For some reason I decided to use promises instead of observables back when I started this project. Not sure if that's relevant.

score 1 · Accepted Answer · edited Sep 16 '19 at 10:45

For the purpose of not leaving this seemingly unsolved, and in case someone trips over this silly issue, this was what was going on:

The actual URLs of my app included a trailing slash (/users/) and I was requesting them without the slash (/user). So my back end would respond with a redirection (301) to the proper URL. It seems that, while Chrome will handle this redirection, Firefox won't. Simple as that.

Bottom line is: write your URLs properly.

Angular 5 not handling 301 responses properly in firefox

1 Answers1