The Issue at Hand
I have developed an angular application that functions flawlessly on the development server. This application utilizes localStorage to store the user's JWT token, although I am aware that this may not be the most secure method.
However, the problem arises when I deploy the application to production. Strangely, upon executing the service, the page reloads causing the loss of the stored JWT token in the localStorage.
Environment Details
Operating Environment: Apache Server + Debian 9 (Production Only)
Angular CLI: 8.1.1
Node: 12.5.0
OS: win32 x64
Angular: 8.1.1
Highlighted Code
Upon investigation, I have pinpointed the code responsible for triggering this issue:
This is the function calling the API service:
getPosts() {
this.loading = true;
this.mdpostsService.getFirsyMDPosts()
.subscribe(data => {
this.mdPosts = data['results'];
this.mdPostsNextPage = data['next'];
this.loading = false;
});
}
Here is the service code fetching the data:
getFirsyMDPosts() {
return this.http.get(`${environment.apiUrl}/mdposts/`)
.pipe(map(r => {
return r;
}));
}
In order to determine the root cause, I created a button that triggers the function:
<button class="btn btn-danger" (click)="getPosts()">Get Posts</button>