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 , reclass 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 = MyHttpRequestHandlerPORT = 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

访问网页正常

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SQL表间关联查询详解

简介 本文主要讲解SQL语句中常用的表间关联查询方式,包括:左连接(left join)、右连接(right join)、全连接(full join)、内连接(inner join)、交叉连接&…

Android Jni(一) 快速使用

文章目录 Android Jni(一) 快速使用1、 环境配置下载 NDK2、右键 add c to module3、创建一个 native 方法,并更具提示,自动创建对应的 JNI 实现4、实现对应 Jni 方法5、static loadLibrary6、调用执行 遇到的问题1、[CXX1300] CM…

【HarmonyOS之旅】基于ArkTS开发(二) -> UI开发之常见布局

目录 1 -> 自适应布局 1.1 -> 线性布局 1.1.1 -> 线性布局的排列 1.1.2 -> 自适应拉伸 1.1.3 -> 自适应缩放 1.1.4 -> 定位能力 1.1.5 -> 自适应延伸 1.2 -> 层叠布局 1.2.1 -> 对齐方式 1.2.2 -> Z序控制 1.3 -> 弹性布局 1.3.1…

React 中hooks之useLayoutEffect 用法总结以及与useEffect的区别

React useLayoutEffect 1. useLayoutEffect 基本概念 useLayoutEffect 是 React 的一个 Hook,它的函数签名与 useEffect 完全相同,但它会在所有的 DOM 变更之后同步调用 effect。它可以用来读取 DOM 布局并同步触发重渲染。 2. useLayoutEffect vs us…

物联网网关Web服务器--Boa服务器移植与测试

1、Boa服务器介绍 BOA 服务器是一个小巧高效的web服务器,是一个运行于unix或linux下的,支持CGI的、适合于嵌入式系统的单任务的http服务器,源代码开放、性能高。 Boa 嵌入式 web 服务器的官方网站是http://www.boa.org/。 特点 轻量级&#x…

tomcat状态一直是Exited (1)

docker run -di -p 80:8080 --nametomcat001 你的仓库地址/tomcat:9执行此命令后tomcat一直是Exited(1)状态 解决办法: 用以下命令创建运行 docker run -it --name tomcat001 -p 80:8080 -d 你的仓库地址/tomcat:9 /bin/bash最终结果 tomcat成功启动

三天急速通关Java基础知识:Day1 基本语法

三天急速通关JAVA基础知识:Day1 基本语法 0 文章说明1 关键字 Keywords2 注释 Comments2.1 单行注释2.2 多行注释2.3 文档注释 3 数据类型 Data Types3.1 基本数据类型3.2 引用数据类型 4 变量与常量 Variables and Constant5 运算符 Operators6 字符串 String7 输入…

表单中在不设置required的情况下在label前加*必填标识

参考:https://blog.csdn.net/qq_55798464/article/details/136233718 需求:在发票类型前面添加*必填标识 我最开始直接给发票类型这个表单类型添加了验证规则required:true,问题来了,这个发票类型它是有默认值的,所以我点击保存…

基于PHP的校园兼职系统的设计与开发

摘要:从古代至今,教育都是国家培养人才的手段,在古代教育往往都是课堂式教育,在课堂内老师教导学生学习,而随着时间的推移,越来越多的在校大学生已经不满足于只在课堂上所学到的知识,往往他们选…

Java异常常见面试题

目录 1. Error 和 Exception 区别是什么? 2. 运行时异常和一般异常(受检异常)区别是什么? 3. JVM 是如何处理异常的? 4. throw 和 throws 的区别是什么? 5. final、finally、finalize 有什么区别? 6. NoClassDef…

2025寒假备战蓝桥杯01---朴素二分查找的学习

文章目录 1.暴力方法的引入2.暴力解法的思考 与改进3.朴素二分查找的引入4.朴素二分查找的流程5.朴素二分查找的细节6.朴素二分查找的题目 1.暴力方法的引入 对于下面的这个有序的数据元素的组合,我们的暴力解法就是挨个进行遍历操作,一直找到和我们的这…

ROS机器人学习和研究的势-道-术-转型和变革的长期主义习惯

知易行难。说说容易做到难。 例如,不受成败评价影响,坚持做一件事情10年以上,专注事情本身。 机器人专业不合格且失败讲师如何让内心保持充盈的正能量(节选)-CSDN博客 时间积累 注册20年。 创作历程10年。 创作10年…

渗透测试之XEE[外部实体注入]漏洞 原理 攻击手法 xml语言结构 防御手法

目录 原理 XML语言解释 什么是xml语言: 以PHP举例xml外部实体注入 XML语言结构 面试题目 如何寻找xxe漏洞 XEE漏洞修复域防御 提高版本 代码修复 php java python 手动黑名单过滤(不推荐) 一篇文章带你深入理解漏洞之 XXE 漏洞 - 先知社区 原理 XXE&…

大模型GUI系列论文阅读 DAY1:《基于大型语言模型的图形用户界面智能体:综述》

摘要 图形用户界面(Graphical User Interfaces, GUIs)长期以来一直是人机交互的核心,为用户提供了直观且以视觉为驱动的方式来访问和操作数字系统。传统上,GUI交互的自动化依赖于基于脚本或规则的方法,这些方法在固定…

BUUCTF_Web([GYCTF2020]Ezsqli)

1.输入1 ,正常回显。 2.输入1 ,报错false,为字符型注入,单引号闭合。 原因: https://mp.csdn.net/mp_blog/creation/editor/145170456 3.尝试查询字段,回显位置,数据库,都是这个。…

react使用react-redux状态管理

1、安装 npm install react-redux2、创建store.js import { createStore } from redux;// 定义初始状态 const initialState {counter: 888 };// 定义 reducer 函数,根据 action 类型更新状态 function reducer(state initialState, action) {switch (action.ty…

计算机网络 | IP地址、子网掩码、网络地址、主机地址计算方式详解

关注:CodingTechWork 引言 在计算机网络中,IP地址、子网掩码和网络地址是构建网络通信的基本元素。无论是企业网络架构、互联网连接,还是局域网(LAN)配置,它们都起着至关重要的作用。理解它们的工作原理&a…

JAVA使用自定义注解,在项目中实现EXCEL文件的导出

首先定义一个注解 Retention(RetentionPolicy.RUNTIME) Target(ElementType.FIELD) public interface Excel {/*** 导出时在excel中排序*/int sort() default Integer.MAX_VALUE;/*** 导出到Excel中的名字.*/String name() default "";/*** 首行字段的批注*/String …

数据可视化大屏设计与实现

本文将带你一步步了解如何使用 ECharts 实现一个数据可视化大屏,并且如何动态加载天气数据展示。通过整合 HTML、CSS、JavaScript 以及后端接口请求,我们可以构建一个响应式的数据可视化页面。 1. 页面结构介绍 在此例中,整个页面分为几个主…

搭建Hadoop源代码阅读环境

个人博客地址:搭建Hadoop源代码阅读环境 | 一张假钞的真实世界 环境 Mac OS X EI Capitan 10.11.6java version “1.7.0_80”git version 2.7.4 (Apple Git-66)Apache Maven 3.3.9下载源代码 从Git上下载最新源代码: git clone git://git.apache.org/hadoop-common.git 构…