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
代码如下:

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

访问网页正常

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/956412.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

SparkSQL数据源与数据存储

文章目录 1. 大数据分析流程2. Spark SQL数据源2.1 SparkSQL常见数据源2.2 SparkSQL支持的文本格式2.3 加载外部数据源步骤 3. 本地文件系统加载数据3.1 本地文件系统加载JSON格式数据3.1.1 概述3.1.2 案例演示 3.2 本地文件系统加载CSV格式数据3.2.1 概述3.2.2 案例演示 3.3 本…

LLM - 大模型 ScallingLaws 的 CLM 和 MLM 中不同系数(PLM) 教程(2)

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/145188660 免责声明:本文来源于个人知识与公开资料,仅用于学术交流,欢迎讨论,不支持转载。 Scalin…

AI agent 在 6G 网络应用,无人机群控场景

AI agent 在 6G 网络应用,无人机群控场景 随着 6G 时代的临近,融合人工智能成为关键趋势。借鉴 IT 行业 AI Agent 应用范式,提出 6G AI Agent 技术框架,包含多模型融合、定制化 Agent 和插件式环境交互理念,构建了涵盖四层结构的框架。通过各层协同实现自主环境感知等能力…

信息奥赛一本通 1168:大整数加法

这道题是一道大整数加法,涉及到高精度的算法,比如说有两个数要进行相加,1111111111111111111111111111111111111112222222222222222222222222222222,那么如果这两个数很大的话我们常用的数据类型是不能进行计算的,那么…

基于YOLOv4与Tkinter的口罩识别系统

往期精彩 基于YOLOv11的番茄成熟度实时检测系统设计与实现 用YOLOv11检测美国手语:挥动手腕的科技魔法 基于YOLOv11模型PyQt的实时鸡行为检测系统研究 OpenCV与YOLO在人脸识别中的应用研究(论文源码) 计算机视觉:农作物病虫害检测系统:基于Y…

机器学习:监督学习与非监督学习

监督学习是利用带有标签的数据进行训练,模型通过学习输入和输出之间的关系来进行预测。也就是说,数据集中既有输入特征,也有对应的输出标签,模型的目标是找到从输入到输出的映射关系。 而无监督学习则使用没有标签的数据进行训练,模型的任务是发现数据中的内在结构或模式…

【unity进阶篇】不同Unity版本对应的C# 版本和API 兼容级别(Api Compatibility Level)选择

考虑到每个人基础可能不一样,且并不是所有人都有同时做2D、3D开发的需求,所以我把 【零基础入门unity游戏开发】 分为成了C#篇、unity通用篇、unity3D篇、unity2D篇。 【C#篇】:主要讲解C#的基础语法,包括变量、数据类型、运算符、…

H3CNE-13-静态路由(二)

1.路由优先级 路由类型DirectOSPFStaticRIP管理距离01060100 2.路由度量 配置示例: 配置接口IP、静态路由(去包、回包) 3.静态路由之路由备份 RTB: ip route-static 192.168.1.0 24 10.0.12.1 ip route-ststic 192.168.1.0 24 20.0.12.1 …

【数据分享】1929-2024年全球站点的逐年平均气温数据(Shp\Excel\无需转发)

气象数据是在各项研究中都经常使用的数据,气象指标包括气温、风速、降水、湿度等指标,其中又以气温指标最为常用!说到气温数据,最详细的气温数据是具体到气象监测站点的气温数据!本次我们为大家带来的就是具体到气象监…

[Qualcomm]Qualcomm MDM9607 SDK代码下载操作说明

登录Qualcomm CreatePoing Qualcomm CreatePointhttps://createpoint.qti.qua

PID控制算法原理,并用python实现演示

PID算法控制运用在哪些地方? PID:比列(Proportion),积分(Integral),微分(Differential) PID算法可以用来控制温度,压强,流量,化学成分,速度等等。汽车的定速巡航;伺服驱…

C语言之文本加密程序设计

🌟 嗨,我是LucianaiB! 🌍 总有人间一两风,填我十万八千梦。 🚀 路漫漫其修远兮,吾将上下而求索。 文本加密程序设计 摘要:本文设计了一种文本加密程序,旨在提高信息安…

数字图像处理:实验二

任务一: 将不同像素(32、64和256)的原图像放大为像素大 小为1024*1024的图像(图像自选) 要求:1)输出一幅图,该图包含六幅子图,第一排是原图,第 二排是对应放大…

latin1_swedish_ci(latin1 不支持存储中文、日文、韩文等多字节字符)

文章目录 1、SHOW TABLE STATUS WHERE Name batch_version;2、latin1_swedish_ci使用场景注意事项修改字符集和排序规则修改表的字符集和排序规则修改列的字符集和排序规则修改数据库的默认字符集和排序规则 3、ALTER TABLE batch_version CONVERT TO CHARACTER SET utf8mb4 C…

基于微信小程序的安心陪诊管理系统

作者:计算机学姐 开发技术:SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等,“文末源码”。 专栏推荐:前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏:…

如何将自己本地项目开源到github上?

环境: LLMB项目 问题描述: 如何将自己本地项目开源到github上? 解决方案: 步骤 1: 准备本地项目 确保项目整洁 确认所有的文件都在合适的位置,并且项目的 README.md 文件已经完善。检查是否有敏感信息&#xff0…

CSS笔记01

黑马程序员视频地址: 前端Web开发HTML5CSS3移动web视频教程https://www.bilibili.com/video/BV1kM4y127Li?vd_source0a2d366696f87e241adc64419bf12cab&spm_id_from333.788.videopod.episodes 目录 引入方式 CSS特性 继承性 层叠性 优先级 Emmet写法 …

【机器学习】制造业转型:机器学习如何推动工业 4.0 的深度发展

我的个人主页 我的领域:人工智能篇,希望能帮助到大家!!!👍点赞 收藏❤ 引言 在当今科技飞速发展的时代,制造业正经历着前所未有的变革,工业4.0的浪潮席卷而来。工业4.0旨在通过将…

【游戏设计原理】72 - 学习曲线

学习曲线的观点本质上强调了玩家在游戏中逐渐掌握新技能的过程,旨在通过设计合适的难度和反馈机制,确保玩家在学习的过程中感受到挑战,同时又不会感到过于困难或无聊。 1. 学习曲线的定义和重要性 学习曲线反映了玩家在完成某个任务时&…

【Linux】进程优先级与进程切换

🔥个人主页🔥:孤寂大仙V 🌈收录专栏🌈:Linux 🌹往期回顾🌹:【Linux】进程状态 🔖流水不争,争的是滔滔不 一、进程优先级是什么二、查看系统进程三…