Angular 在执行我对 API 的数据请求服务时重新加载页面。仅在生产中

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

问题

我有一个 angular 应用程序在开发服务器上运行良好。该应用程序使用 localStorage(我知道这不是最好的)来存储用户的 JWT 令牌

当我将应用程序投入生产时出现问题,由于某种原因,在执行服务时页面重新加载,因此我丢失了 localStorage 以及用户的 JWT 令牌

环境

Apache 服务器 + Debian 9(仅限生产)

Angular命令行界面:8.1.1
节点:12.5.0
OS: win32 x64
Angular: 8.1.1

一些代码

我已设法找出问题并检测到是以下代码导致了此问题:

触发API服务的函数:

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

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

获取数据的服务代码:

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

为了隔离问题,我创建了一个触发功能的按钮:

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

我终于找到解决办法了!经过几个小时的测试并查看主机后,我发现问题出在 WSGI Django 的授权上。

解决方法很简单,启用WSGI authentication headers。只需将以下行放入 Apache 虚拟主机配置中:

WSGIPassAuthorization On