Nginx与history路由模式：刷新页面404问题

        使用nginx部署前端项目，路由模式采用history模式时，刷新页面之后，显示404。

路由模式

        前端路由的基本作用为：

        ①当浏览器地址变化时，切换页面；

        ②点击浏览器后退、前进按钮时，更新网页内容；

        ③刷新浏览器页面时，网页加载与当前路由相匹配的内容。

        在前端项目开发中，主要使用到两种路由模式：

        【1】hash模式：通过监听浏览器地址hash值，在回调函数中切换网页内容/部分内容；

        【2】history模式：基于history API自定义url地址，实现url地址变化并保证网页内容的切换。

hash模式

基本原理

        使用window.location.hash属性及窗口的onhashchange事件，可以实现监听浏览器地址hash值变化，执行相应的js切换网页。

Location：hash属性
hashchange事件

        hash模式的特点如下：

①hash指的是地址中#号以及后面的字符，也称为散列值。hash也称作锚点，本身是用来做页面跳转定位的。如http://localhost/index.html#abc，这里的#abc就是hash；
②散列值是不会随请求发送到服务器端的，所以改变hash，不会重新加载页面；
③ window 的 hashchange 事件作用：当散列值改变时，可以通过 location.hash 来获取和设置hash值；
④location.hash值的变化会直接反应到浏览器地址栏。

hash路由触发条件

        那么，如何触发hash路由呢？主要分为编程式触发（例如：通过a标签设置锚点、js代码级动态更新）和手动触发（例如：点击浏览器的前进/后退按钮），

        ①当浏览器地址栏的散列值/hash值变化时，会自动触发location..hash属性值的变化，从而触发onhashChange事件。

        ②当只改变浏览器地址栏URL的哈希值时，按下enter键不会导致浏览器向服务器发送请求，此时仅仅是设置hash值，并触发onhashChange事件。

        ③HTML提供的a标签，通过其href属性可以为页面设置锚点，当点击a标签时，可以跳转到对应元素所在区域，同时更新地址栏hash值（伴随着Location.hash属性值的更新），并触发onhashChange事件。

example-基础示例

        代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hash模式</title>
    <style>
        .box{
            margin:15px;
            min-height: 100vh;
            width: 100%;
            background-color: skyblue;
        }
    </style>
</head>
<body>

    <div class="box" id="part_1">part_1</div>
    <div class="box" id="part_2">part_2</div>
    <a href="#part_1">to_part_1</a>
    <a href="#part_2">to_part_2</a>

    <script>
        window.onhashchange = (event)=>{
            console.log('hash:',window.location.hash,event)
        }

    </script>
</body>
</html>

example-hash-Router

        模拟简单的hash路由，

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>hash模式</title>
    <style>
        .box {
            margin: 15px;
            min-height: 100px;
            width: 100%;
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <a href="#home">home</a>
    <a href="#part_1">part_1</a>
    <a href="#part_2">part_2</a>
    <div id="app">

    </div>
    <!-- HTML 内容模板（<template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以 (原文为 may be) 在运行时使用 JavaScript 实例化。 -->
    <template id="home">
        <div class="box" id="home">home</div>
    </template>
    <template id="part_1">
        <div class="box" id="part_1">part_1</div>
    </template>

    <template id="part_2">
        <div class="box" id="part_2">part_2</div>
    </template>

    <script>
        //根节点
        const rootNode = document.getElementById("app")
        //刷新页面方法
        const refreshApp = (hash) => {
            hash = hash || 'home'
            const elem = document.getElementById(hash);
            rootNode.innerHTML = elem.innerHTML
        }
        //hash-change事件监听
        window.onhashchange = (event) => {
            console.log('hash:', window.location.hash, event)
            //根据hash值显示对应的页面部分
            const hash = window.location.hash.replace("#", '');
            refreshApp(hash)
        }
        //初始事件监听
        document.body.onload = () => {
            const hash = window.location.hash.replace("#", '');
            refreshApp(hash)
        }

    </script>
</body>

</html>

优缺点

  • 优点：浏览器兼容性较好，连 IE8 都支持
  • 缺点：路径在井号 # 的后面，比较丑

history模式

基本原理|History对象

        history模式基于history API实现。

        history API 是 H5 提供的新特性，允许开发者直接更改前端路由，即更新浏览器 URL 地址而不重新发起请求。

history API

        关于History对象，

        ①window.history 属性指向 History 对象，它表示当前窗口的浏览历史。当发生改变时，只会改变页面的路径，不会刷新页面。
        ②History 对象保存了当前窗口访问过的所有页面网址。通过 history.length 可以得出当前窗口一共访问过几个网址。
        ③由于安全原因，浏览器不允许脚本读取这些地址，但是允许在地址之间导航
        ④浏览器工具栏的“前进”和“后退”按钮，其实就是对 History 对象进行操作。

history路由触发条件

        每当 history 对象出现变化时，就会触发 popstate 事件。

onpopstate事件

        ①仅仅调用pushState()方法或replaceState()方法 ，并不会触发该事件;
        ②只有用户点击浏览器倒退按钮和前进按钮，或者使用 JavaScript 调用History.back()、History.forward()、History.go()方法时才会触发。
        ③另外，该事件只针对同一个文档，如果浏览历史的切换，导致加载不同的文档，该事件也不会触发。
        ④页面第一次加载的时候，浏览器不会触发popstate事件。

example-history-Router

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>history模式</title>
    <style>
        .box {
            margin: 15px;
            min-height: 100px;
            width: 100%;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <nav id="nav">
        <a href="javascript:void(0)">home</a>
        <a href="javascript:void(0)">part_1</a>
        <a href="javascript:void(0)">part_2</a>
    </nav>
    <div id="app">

    </div>
    <!-- HTML 内容模板（<template>）元素是一种用于保存客户端内容机制，该内容在加载页面时不会呈现，但随后可以 (原文为 may be) 在运行时使用 JavaScript 实例化。 -->
    <template id="home">
        <div class="box" id="home">home</div>
    </template>
    <template id="part_1">
        <div class="box" id="part_1">part_1</div>
    </template>

    <template id="part_2">
        <div class="box" id="part_2">part_2</div>
    </template>
    <script>
        //获取节点
        const rootNode = document.getElementById("app")
        const navlement = document.querySelector('#nav')
        //刷新页面方法
        const refreshApp = (path) => {
            path = path || 'home'
            const elem = document.getElementById(path);
            rootNode.innerHTML = elem.innerHTML
        }
        navlement.onclick = (event)=>{
            const target = event.target;
            if(target.nodeName !== 'A'){
                return
            }
            const path = target.textContent
            console.log(path)
            // history.pushState()，改变当前地址栏的路径，并不会更新页面内容
            history.pushState(null,null,path)
            refreshApp(path)
        }
        //onpopstate-事件:监听-点击浏览器的前进按钮/后退按钮
        window.onpopstate = (event)=>{
            console.log(event)
            //
        }

    </script>
</body>
</html>

优缺点

        history 致命的缺点就是当改变页面地址后，强制刷新浏览器时，（如果后端没有做准备的话）会报错，因为刷新是拿当前地址去请求服务器的，如果服务器中没有相应的响应，会出现 404 页面。

        例如：拿live-server来讲，保存页面时，导致页面刷新，进而显示找不到页面。

Nginx相关配置

Nginx+History路由模式：404问题

        通常，我们使用nginx部署前端项目时，简单配置如下，

worker_processes  1;
events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    #服务配置
    server {
       listen       8157;
       server_name  localhost;
       
        #前端项目部署配置
        location / {
            root   /home/server_dir/erp/web;
            index  index.html index.htm;
        }
    }
}

        但是，当前端项目使用History路由模式进行打包时，每当我们刷新页面，就会显示404找不到，那么，如何在服务端解决这个问题呢？

相关配置

location:root根目录配置

        用户请求的最终结果是要返回数据，当响应文件在 Nginx 服务器本地时，需要进行本地文件位置、读或写、返回执行结果的操作。Nginx 中的 root 指令可以设定请求 URL 的本地文件根目录，如下表所示。

        例如：

location /flv/ {
    root /data/web;
}

         当 root 指令在 location 指令域时，root 设置的是 location 匹配访问路径的上一层目录，样例中被请求文件的实际本地路径为 /data/web/flv/。
        Tips：location 中的路径是否带"/"，对本地路径的访问无任何影响。

location:alias虚拟目录配置

        Nginx 中想要配置虚拟目录可以使用 alias 指令，该指令的介绍如下表所示：

        例如：

server{
    listen 8080;
    server_name www.nginxtest.org;
    root /opt/nginx-web/www;
    location /flv/ {
        alias /opt/nginx-web/flv/;
    }

    location /js {
        alias /opt/nginx-web/js;
    }

    location /img {
        alias /opt/nginx-web/img/;
    }
}

        可以用如下命令分别进行访问测试：

curl http://127.0.0.1:8080/flv/
curl -L http://127.0.0.1:8080/js
curl http://127.0.0.1:8080/js/
curl -L http://127.0.0.1:8080/img
curl http://127.0.0.1:8080/img/

        alias 指定的目录是 location 路径的实际目录，其所在 location 的 rewrite 指令不能使用 break 参数。

location:try_files

        try_files 指令是在 Nginx0.7.27 版本中开始加入的，它可以按顺序检查文件是否存在，并返回第一个找到的文件，如果未找到任何文件，则会调用最后一个参数进行内部重定向，如下表所示：

         例如：

location /images/ {
    # $uri存在则执行代理的上游服务器操作，否则跳转到default.gif的location
    try_files $uri /images/default.gif;
}

location = /images/default.gif {
    #expires配置可以控制页面资源在浏览器缓存的时间。在指定事件内再次访问该静态资源，将不再像nginx发送请求，而是直接从浏览器缓存中获取
    expires 30s;
}

解决方案：alias+try_files

        可以将前述部署配置改为，即可解决。

worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
       listen       8157;
       server_name  localhost;
        #前端项目部署
        location / {
            # root   /home/server_dir/erp/web;
            alias  /home/server_dir/erp/web/;
            index  index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
    }

}

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

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

相关文章

双面板设计的一套经验规则-笔记

双面板设计的一套经验规则-笔记

过大的分布电感导致信号地干扰也就是地弹(专业名词) 还有就是输出瞬态电流导致的地弹 图中可以看到最高 0.5V 的信号地干扰&#xff0c;这只是单一块开发板的测试结果。如果接上外围电路&#xff0c;甚至面包板电路可以想象噪声水平可能会更高。 双面电路板 经验规则 下面来…
阅读更多...
Tomcat 原理分析

Tomcat 原理分析

1、Tomcat 的组成 如下图&#xff1a; Tomcat组成 Server&#xff1a; Tomcat 封装的、对外提供完整的、基于组件的 web 服务&#xff0c;包含 Connectors、Container 两个核心组件&#xff0c;以及多个功能组件&#xff0c;各个 Service 之间是独立的&#xff0c;但是共享 同…
阅读更多...
【数据结构】前缀树的模拟实现

【数据结构】前缀树的模拟实现

目录 1、什么是前缀树&#xff1f; 2、模拟实现 2.1、前缀树节点结构 2.2、字符串的添加 2.3、字符串的查寻 2.3.1、查询树中有多少个以字符串"pre"作为前缀的字符串 2.3.2、查询某个字符串被添加过多少次 2.4、字符串的删除 3、完整代码 1、什么是前缀树&…
阅读更多...
Flink 2.0 状态存算分离改造实践

Flink 2.0 状态存算分离改造实践

本文整理自阿里云智能 Flink 存储引擎团队兰兆千在 FFA 2023 核心技术&#xff08;一&#xff09;中 的分享&#xff0c;内容关于 Flink 2.0 状态存算分离改造实践的研究&#xff0c;主要分为以下四部分&#xff1a; Flink 大状态管理痛点 阿里云自研状态存储后端 Gemini 的存…
阅读更多...
Linux下的crontab定时执行任务命令详解

Linux下的crontab定时执行任务命令详解

在LINUX中&#xff0c;周期执行的任务一般由cron这个守护进程来处理[ps -ef|grep cron]。cron读取一个或多个配置文件&#xff0c;这些配置文件中包含了命令行及其调用时间。 cron的配置文件称为“crontab”&#xff0c;是“cron table”的简写。 一、cron服务 　　cron是一个…
阅读更多...
为什么要进行FTP替代？专业的FTP替代方案了解一下！

为什么要进行FTP替代？专业的FTP替代方案了解一下！

FTP&#xff08;File Transfer Protocol&#xff0c;文件传输协议&#xff09;的历史可以追溯到20世纪70年代&#xff0c;这是一个由美国国防部资助的早期计算机网络&#xff0c;后来发展成为互联网的前身。随着时间的推移&#xff0c;FTP经历了多次迭代和改进&#xff0c;以适…
阅读更多...
有关网络安全的课程学习网页

有关网络安全的课程学习网页

1.思科网络学院 免费学习skillsforall的课程 课程链接&#xff1a;Introduction to Cybersecurity by Cisco: Free Online Course (skillsforall.com) 2.斯坦福大学计算机和网络安全基础 该证书对于初学者来说最有价值&#xff0c;它由最著名的大学之一斯坦福大学提供。您可…
阅读更多...
【动态规划】【C++算法】2518. 好分区的数目

【动态规划】【C++算法】2518. 好分区的数目

作者推荐 【动态规划】【前缀和】【C算法】LCP 57. 打地鼠 本文涉及知识点 动态规划汇总 LeetCode:2518. 好分区的数目 给你一个正整数数组 nums 和一个整数 k 。 分区 的定义是&#xff1a;将数组划分成两个有序的 组 &#xff0c;并满足每个元素 恰好 存在于 某一个 组中…
阅读更多...
AVR 328pb ADC基本介绍和使用

AVR 328pb ADC基本介绍和使用

AVR 328pb ADC基本介绍和使用 &#x1f4cd;结合参考同架构lgt8f328p中文文档&#xff1a;http://www.prodesign.com.cn/wp-content/uploads/2023/03/LGT8FX8P_databook_v1.0.4.pdf &#x1f4d8;328pb ADC特性 • 10-bit Resolution 10位分辨率 • 0.5 LSB Integral Non-lin…
阅读更多...
猫头虎分享已解决Bug || JavaScript语法错误（Syntax Error）：SyntaxError: Unexpected token

猫头虎分享已解决Bug || JavaScript语法错误（Syntax Error）：SyntaxError: Unexpected token

博主猫头虎的技术世界 &#x1f31f; 欢迎来到猫头虎的博客 — 探索技术的无限可能&#xff01; 专栏链接&#xff1a; &#x1f517; 精选专栏&#xff1a; 《面试题大全》 — 面试准备的宝典&#xff01;《IDEA开发秘籍》 — 提升你的IDEA技能&#xff01;《100天精通鸿蒙》 …
阅读更多...
leetcode（哈希表）49.字母异位词分组（C++详细解释）DAY5

leetcode（哈希表）49.字母异位词分组（C++详细解释）DAY5

文章目录 1.题目示例提示 2.解答思路3.实现代码结果 4.总结 1.题目 给你一个字符串数组&#xff0c;请你将 字母异位词 组合在一起。可以按任意顺序返回结果列表。 字母异位词 是由重新排列源单词的所有字母得到的一个新单词。 示例 示例 1: 输入: strs [“eat”, “tea”…
阅读更多...
Golang的for循环变量和goroutine的陷阱，1.22版本的更新

Golang的for循环变量和goroutine的陷阱，1.22版本的更新

先来看一段golang 1.22版本之前的for循环的代码 package mainimport "fmt"func main() {done : make(chan bool)values : []string{"chen", "hai", "feng"}for _, v : range values {fmt.Println("start")go func() {fmt.P…
阅读更多...
Elasticsearch（四）

Elasticsearch（四）

是这样的前面的几篇笔记&#xff0c;感觉对我没有形成知识体系&#xff0c;感觉乱糟糟的&#xff0c;只是大概的了解了一些基础知识&#xff0c;仅此而已&#xff0c;而且对于这技术栈的学习也是为了在后面的java开发使用&#xff0c;但是这里的API学的感觉有点乱&#xff01;然…
阅读更多...
JavaScript 入门 完整版

JavaScript 入门 完整版

目录 第一个知识点&#xff1a;引入js文件 内部引用: 外部引用: 第二个知识点&#xff1a;javascript的基本语法 定义变量&#xff1a; 条件控制(if - else if - else) 第三个知识点&#xff1a;javascript里的数据类型、运算符&#xff1a; 数字类型 字符串类型 布尔…
阅读更多...
前端JavaScript篇之对执行上下文的理解

前端JavaScript篇之对执行上下文的理解

目录 对执行上下文的理解创建执行上下文 对执行上下文的理解 当我们在执行JavaScript代码时&#xff0c;JavaScript引擎会创建并维护一个执行上下文栈来管理执行上下文。执行上下文有三种类型&#xff1a;全局执行上下文、函数执行上下文和eval函数执行上下文。 在写代码的时…
阅读更多...
FRP内网穿透需要注意的事情

FRP内网穿透需要注意的事情

安全性 SSH设置好密钥后&#xff0c;一定要关闭密码登陆。现在暴力破解策略往往是先派小鸡端口扫描看看谁可以密码访问&#xff0c;如果可以&#xff0c;然后定点爆破就开始了。不允许root登陆。FRP使用token验证。FRP服务端要输出配置文件&#xff0c;info等级就能显示访问ip…
阅读更多...
mac docker 宿主机和容器间网络打通

mac docker 宿主机和容器间网络打通

动因 是这样&#xff0c;笔者最近满怀欣喜入手Docker&#xff0c;看着各种文章命令都是不断点头称道&#xff1a;“嗯嗯&#xff0c;不错不错”,在接下来终于准备大干一场的时候碰壁了&#xff0c;主要情况是说在Mac中跑了第一把的时候发现碰到&#xff0c;虚拟机和宿主机居然…
阅读更多...
C语言笔试题之两数相加（多次反转链表实现）

C语言笔试题之两数相加（多次反转链表实现）

实例要求&#xff1a; 1、给定两个非空链表&#xff08;l1和l2&#xff09;来代表两个非负整数&#xff1b;2、数字最高位位于链表开始位置&#xff1b;3、它们的每个节点只存储一位数字&#xff1b;4、将这两数相加会返回一个新的链表&#xff1b; 案例展示&#xff1a; 实例…
阅读更多...
Leetcode刷题笔记题解（C++）：面试题 08.07. 无重复字符串的排列组合

Leetcode刷题笔记题解（C++）：面试题 08.07. 无重复字符串的排列组合

思路&#xff1a;因为字符之间互不相同&#xff0c;故使用全排列的方式去解题&#xff1b; 字符串长度为n&#xff0c;将第一个字母分别与后面每一个字母进行交换&#xff0c;生成n种不同的全排列&#xff1b;再用第二个元素与后面每一个元素进行交换&#xff0c;生成n - 1种不…
阅读更多...
K8S之运用亲和性设置Pod的调度约束

K8S之运用亲和性设置Pod的调度约束

亲和性 Node节点亲和性硬亲和实践软亲和性实践 Pod节点亲和性和反亲和性pod亲和性硬亲和实践 pod反亲和性 Pod 的yaml文件里 spec 字段中包含一个 affinity 字段&#xff0c;使用一组亲和性调度规则&#xff0c;指定pod的调度约束。 kubectl explain pods.spec.affinity 配置…
阅读更多...
最新文章

Copyright @ 2022~2023