Nginx解决历史模式下页面刷新404问题实例

知识首页应用(SPA -单页应用)只在页面第一次加载时返回唯一的html页面及其公共静态资源，后续的页面跳转不会从服务器上取html文件。(哈希和历史路由可以在不刷新页面的情况下改变浏览器url)哈希路由示例:www.baidu.com/#/home,'s原始哈希用于结合锚点控制页面尝试。当#后的值发生变化时，页面不会被重新请求，这主要是通过window的onhashchange方法实现的。与哈希路由相比，历史路由最直观的变化就是路由中没有#号。通过调用window.history对象上的一系列方法，可以跳过页面而不刷新(pushState，replaceState)。在历史模式下，由于url发生了变化，此时如果手动刷新页面，浏览器认为是在请求新页面(发起新的Http请求)，但新页面并不存在(如果没有配置后端)，导致404。

先简单描述一下在浏览器中输入IP或域名后会发生什么(有点面试题的味道)。按回车键后，浏览器发送的http请求html文件，经过一系列转发和寻址解析后，由目标IP所在服务器的80端口(默认)接收。这时候，问题来了。服务器的80接口得到Http请求后，不知道返回什么。此时，它需要Nginx充当静态资源代理。

Nginx对于一般的项目部署，我们需要处理nginx.conf配置文件，需要了解以下内容。

...# http是一个指令块，为http网络传输的一些指令配置了http {#文件扩展名和文件类型includedmime.types的映射表；#设置客户端和服务器请求的超时周期keepalive _ timeout 65#开启压缩功能，目的是提高传输效率，节省带宽。服务器上的{ # Listen port listen 80#服务命名，最好用该服务器的域名命名server _ name localhost#指令块，配置外部访问资源与实际资源位置的对应关系/{ root/usr/blog；#表示静态资源所在的目录索引index.htm，index.html；#访问对应于此路径的默认静态资源文件或网页}}}

位置语法

位置[= |||| | *| | @] URI {...}位置@名称{...} =:表示完全匹配~:表示区分大小写的常规匹配~ *:表示不区分大小写的常规匹配~:表示URI以常规字符串开头！~:表示区分大小写的常规不匹配！~ *:表示不区分大小写，常规不匹配/:常规匹配，任何请求都会匹配。

常用匹配规则#将所有请求直接转发到服务器的9090端口位置=/{ proxy _ pass http://127 . 0 . 0 . 1:9090/；} #目录匹配位置~/static/{ root/webroot/static/；} #后缀匹配位置~ * \。(GIF | JPG | JPEG | PNG | CSS | JS | ICO)$ { root/webroot/RES/；} #将请求从/Account/转发到帐户服务器位置/Account/{ proxy _ pass http://127 . 0 . 0 . 1:8080/} #将请求从/Order/转发到订单服务器位置/Order/{ proxy _ pass http://127 . 0 . 0 . 1:9090/}

根别名和根别名的区别在于nginx如何解释定位后的url

[root]语法:根路径默认值:根html配置段:http，server，location，if处理结果:根路径+location路径

[alias]语法:别名路径配置段:位置处理结果:用别名路径替换位置路径。

#返回文件位置~/t/{ root/www/root/html/t/a . html/；} #返回/www/root/html/new_t/a.html #放弃location后配置的路径，将当前匹配的目录指向指定目录。位置^~/t/{ alias/www/root/html/new _ t/；}

刷新后404的问题从上面的知识可以知道。刷新后浏览器根据当前url请求html文件，但是SPA只有一个html文件，所以需要在nginx.conf的相应位置配置一行代码try _ files $ uri $ uri//index . html；告诉nginx检查文件是否按顺序存在，如果不存在就重定向到index.html文件。

最初，总结只是对一个自部署项目的问题的调查。其实解决问题只需要一行代码，但解决问题只是最基本的。我们更需要的是通过这个问题补充更多我们不知道的东西。只有这样才能学到更多的东西，不能只做零敲碎打。

以上是Nginx解决历史模式下页面刷新404的例子细节。有关Nginx历史页面刷新404的更多信息，请关注主机频道zhujipindao中的其他相关文章。com！