Angular应用程序在使用Apache服务器时在页面刷新时呈现后端数据

ui7jx7zq  于 2023-10-23  发布在  Apache
关注(0)|答案(2)|浏览(121)

我正在尝试用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服务器并访问www.example.com时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/jobs *)并刷新页面时,我看到的不是前端UI,而是后端数据以JSON的形式显示在屏幕上。基本上,它不是显示我用Angular编写的前端html和CSS,而是显示后端json消息,就像在app.py文件中显示/facts路由或/jokes路由一样。这种特殊的行为只在刷新页面时发生,我希望避免这种情况。我能做错什么呢?
它应该显示:correct behavior
但是在刷新页面时,它显示的不是UI:wrong behavior
请注意,只有在刷新页面或直接转到路由时,后端数据才会突然显示。我在主页上有一个按钮,可以转到事实路线,点击按钮后,前端UI就会正确显示。
最初,我只尝试render_template(index.html),但没有成功。然后我去了Flask文档,遇到了Single Page Application(SPA),我试图在代码中添加它,正如你所看到的。但那也没用。

mrphzbgm

mrphzbgm1#

或者,您可以在Angular应用程序中使用基于散列的路由。这也应该能解决问题。

kq0g1dla

kq0g1dla2#

在我的应用程序中,前端和后端的url名称是相同的,这就是为什么会有一个名称冲突,导致后端数据呈现。基本上,为前端和后端保留单独的url名称解决了这个问题。

相关问题