python http server运行Angular 单页面路由时重定向,解决404问题

问题

当Angular在本地ng server运行时候,可以顺利访问各级路由。

但是运行ng build后,在dist 路径下的打包好的额index.html 必须要在服务器下运行才能加载。

在服务器下我们第一次访问路由页面时是没有问题的,但是尝试刷新页面或手动输入路由地址,会发现页面变成了404,

可以看到控制台报警 GET http://localhost:8004/b-component 404 (File not found), 我们在debug模式下是没有问题的,但是在打包服务器环境下运行就不行了。

有其他文章说 使用hash 路由可以解决问题,但是hash路由毕竟不是主流的路由方式。

目前使用重定位路由解决。

解决方式

一 创建文件

由于我们使用的是 python的 http server。所以我们创建python 脚本,src/server.py

代码如下:

python 复制代码
import http.server
import socketserver
import os , re

class MyHttpRequestHandler(http.server.SimpleHTTPRequestHandler):
       def do_GET(self):
        # #方法一:根据路由地址判断
        # if self.path in ['/', '/a-component', '/b-component', '/c-component']:
        #     self.path = 'index.html'

        #方法二:根据文件后缀判断
        # 排除一些可能的无后缀静态资源
        # path 里面不含有 . 后缀的都认为是路由地址
        if re.match(r'^\/(?!robots\.txt|sitemap\.xml|manifest\.json).*', self.path) and '.' not in self.path:
            self.path = 'index.html'
        return http.server.SimpleHTTPRequestHandler.do_GET(self)

handler_object = MyHttpRequestHandler

PORT = 8004
my_server = socketserver.TCPServer(("", PORT), handler_object)

my_server.serve_forever()

代码里面,创建了一个自定义的 http.server

当页面请求到固定的路由地址的时候,将请求重定向到了index.html文件,因为我们打包后只有index.html文件,并没有其他的网页文件,所以请求的资源找不到。

这里简单有几种判断方式:

  • 一:枚举所有的重定向地址,如果网页有改动的话需要动态更高
  • 二:根据响应的规则,判断如果是路由地址的话,就重定向到index.html,此规则需要根据实际情况修改
  • 三:在ng build 后,编写脚本,通过js或者python,读取src/app/app.routes.ts文件里面的所有路由地址,存入文件,然后在服务器脚本里面读取判断(未做)

配置拷贝

在angular.json 中添加"src/server.py",这样当build的时候,会拷贝 server.py 在dist 的index.html的同级目录

打包

运行 ng build

运行服务器

进入打包目录后,运行 server.py

  • cd .../dist/btest/browser
  • python3 server.py

访问网页正常

相关推荐
英英_42 分钟前
python 自动化教程
开发语言·python·自动化
万能程序员-传康Kk1 小时前
【Python+flask+mysql】网易云数据可视化分析(全网首发)
python·mysql·信息可视化·数据分析·flask·可视化·网易云
先做个垃圾出来………1 小时前
汉明距离(Hamming Distance)
开发语言·python·算法
测试者家园1 小时前
用 VS Code / PyCharm 编写你的第一个 Python 程序
ide·vscode·python·职场和发展·零基础·pycharm·零基础学python
墨绿色的摆渡人2 小时前
pytorch小记(二十一):PyTorch 中的 torch.randn 全面指南
人工智能·pytorch·python
大叔_爱编程2 小时前
p024基于Django的网上购物系统的设计与实现
python·django·vue·毕业设计·源码·课程设计·网上购物系统
一个天蝎座 白勺 程序猿2 小时前
Python爬虫(29)Python爬虫高阶:动态页面处理与云原生部署全链路实践(Selenium、Scrapy、K8s)
redis·爬虫·python·selenium·scrapy·云原生·k8s
90后小陈老师2 小时前
WebXR教学 09 项目7 使用python从0搭建一个简易个人博客
开发语言·python·web
weixin-WNXZ02182 小时前
闲上淘 自动上货工具运行原理解析
爬虫·python·自动化·软件工程·软件需求
正在走向自律2 小时前
Conda 完全指南:从环境管理到工具集成
开发语言·python·conda·numpy·fastapi·pip·开发工具