Angular 应用程序在使用 Apache Server 时在页面刷新时渲染后端数据

问：

我正在尝试使用 Apache 部署一个演示 Angular Flask 应用程序。我的项目目录是 /var/www/backend/basicapp/。此目录包含：

app.py

from flask import Flask, jsonify, render_template
from flask_cors import CORS, cross_origin

app = Flask(__name__)


CORS(app)

@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
   return app.send_static_file('index.html')

@app.route('/facts')
def facts():
   return jsonify("Honey never spoils. Archaeologists have found pots of honey in ancient Egyptian tombs that are over 3,000 years old!")

@app.route('/jokes')
def jokes():
   return jsonify("Why don't scientists trust atoms? Because they make up everything!")

if __name__=='__main__':
    app.run()

app.wsgi

import sys
import logging
sys.path.insert(0, '/var/www/basicapp/backend')

from app import app as application

此外，这个目录还包含一个 **static **文件夹，我在其中放置了来自 Angular 的所有构建文件。此静态文件夹还包含可在基本路由中看到的 index.html 文件。

这是我在 Apache 的 httpd.conf 文件中的虚拟主机配置：

<VirtualHost *:80>
  ServerName 192.170.160.71

  WSGIDaemonProcess basicapp user=apache group=apache threads=5
  WSGIScriptAlias /basicapp /var/www/basicapp/backend/app.wsgi

  <Directory /var/www/basicapp/backend>
    WSGIProcessGroup basicapp
    WSGIApplicationGroup %{GLOBAL}
    Require all granted
  </Directory>

  ErrorLog /var/www/basicapp/backend/logs/error.log
  CustomLog /var/www/basicapp/backend/logs/access.log combined

</VirtualHost>

现在，当我启动apache服务器并转到192.170.160.71/basicapp/时，我可以在UI上看到我的主页。同样，当我转到 192.170.160.71/basicapp/facts/ 和 192.170.160.71/basicapp/jokes/ 时，我可以看到 UI 上呈现的相应页面。但是，当我转到这两个路由（192.170.160.71/basicapp/facts/ 和 192.170.160.71/basicapp/jokes/）并刷新页面时，我看到后端数据显示为 JSON，而不是显示前端 UI，而是显示屏幕上的 JSON。基本上，它不是显示我用 Angular 编写的前端 html 和 CSS，而是显示后端 json 消息，就像它在 /facts 路由或 /jokes 路由的 app.py 文件中显示的那样。这种特殊行为仅在刷新页面时发生，我想避免这种情况。我哪里会出错？

它应该显示这一点：正确的行为

但是在刷新页面时，它显示的是这个而不是 UI：错误的行为

请注意，后端数据仅在刷新页面或直接转到路由时突然显示。我在主页上有一个按钮可以转到事实路由，单击该按钮后，前端 UI 会正确显示。

最初，我只尝试了 render_template（index.html），但没有用。然后我去了 Flask 文档，遇到了单页应用程序 （SPA），我尝试将其添加到代码中，如您所见。但那也行不通。