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…

物联网网关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,问题来了,这个发票类型它是有默认值的,所以我点击保存…

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&…

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…

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

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

【2024年华为OD机试】 (B卷,100分)- 金字塔,BOSS的收入(Java JS PythonC/C++)

一、问题描述 微商模式收入计算 题目描述 微商模式中,下级每赚 100 元就要上交 15 元。给定每个级别的收入,求出金字塔尖上的人的收入。 输入描述 第一行输入 N,表示有 N 个代理商上下级关系。接下来输入 N 行,每行三个数&am…

光伏储能交直流微电网Matlab/Simulink仿真模型

博士毕业后项目和课题的交接工作也都基本上结束了,之前从20年我博一开始创作的博客,我也将从25年伊始重新进行更新,在保留原有内容的基础上,在对现如今的研究热点进行补充,希望能为各位校友提供一定的研究思路。首先是…

Windows中安装RabbitMQ

安装Erlang 下载地址:https://www.erlang.org/downloads 配置环境变量 变量名:ERLANG_HOME 变量值:D:\tools\Erlang-27.2 Path:%ERLANG_HOME%\bin 验证配置是否成功 erl 安装RabbitMQ 下载地址:https://www.rabbitm…

线性代数概述

矩阵与线性代数的关系 矩阵是线性代数的研究对象之一: 矩阵(Matrix)是一个按照长方阵列排列的复数或实数集合,是线性代数中的核心概念之一。矩阵的定义和性质构成了线性代数中矩阵理论的基础,而矩阵运算则简洁地表示和…

2024年度总结:从后端Java到全栈成长的蜕变

目录 前言1. 用数据与实践书写成长篇章2. 技术与生活的双重蜕变3. 技术的进阶与生活的绽放 前言 今年是我入行的第十年,也是记录在CSDN平台上的第五年。这五年来,我始终坚持记录成长的点滴,将个人事业与博客创作紧密相连。一路走来&#xff0…

关于new和delete的匹配问题

目录 引入 原理 引入 大家先看如下代码: class A { private:int _a 0; };int main() {A* arr1 new A[10];delete arr1;return 0; } 可以发现这里new了一个数组但却用delete释放。先看运行结果: 可以看到程序正常结束并没有崩 ,别急我们…

蓝桥杯3526 子树的大小 | 数学规律

题目传送门 这个题目是一个数学题,比较好的方法是从上往下寻找子树的最左和最右的结点,每层统计子结点数,到树的底部时打印结果。 如何求最左、最右的子结点呢? 对于第i个结点,其前面有i-1个结点,每个结点各有m个孩子,再加上1号结…