Angular reloads the page when my data request service to the API is executed. Only in Production

The Problem

I have an angular application that works very well on the development server. The application uses localStorage (I know it's not the best) to store the user's JWT token

The problem comes when I put the application into production, for some reason when executing the service the page reloads and therefore I lose the localStorage and with it the JWT token of the user

Environment

Apache Server + Debian 9 (Only in Production)

Angular CLI: 8.1.1
Node: 12.5.0
OS: win32 x64
Angular: 8.1.1

Some code

I have managed to isolate the problem and have detected that it is the following code that makes this happen:

The function that triggers the API service:

    getPosts() {
        this.loading = true;
        this.mdpostsService.getFirsyMDPosts()
            .subscribe(data => {

                this.mdPosts = data['results'];
                this.mdPostsNextPage = data['next'];
                this.loading = false;
            });
    }

The code of the service that obtains the data:

    getFirsyMDPosts() {
        return this.http.get(`${environment.apiUrl}/mdposts/`)
            .pipe(map(r => {
                return r;
            }));
    }

To isolate the problem I created a button that triggers the function:

<button class="btn btn-danger" (click)="getPosts()">Ges Posts</button>

I have finally found the solution! After a few hours doing tests and looking at the hosts I could find that the problem was the authorization with WSGI Django.

The solution is simple, enable the WSGI authentication headers. Just put the following line in your Apache virtual host configuration:

WSGIPassAuthorization On