前置知识
- 单页应用(SPA – single page application)
只在第一次加载页面时，返回唯一的html页面和它的公共静态资源，后续的页面跳转都不会从服务端拿html文件。（hash和history路由实现浏览器url变化而不刷新页面） - hash路由
例子：www.baidu.com/#/home, 原本hash是用来结合锚点实现页面试图的控制，当#后面的值发生改变时不会重新请求页面，主要通过window的onhashchange方法来实现。 - history路由
相比于hash路由，最直观的变化就是路由中没有#，通过调用window.history对象上的一系列方法来实现页面的无刷新跳转（pushState、replaceState）。
history模式下，因为url改变了，此时如果手动刷新页面，浏览器认为是请求一个新的页面（发起新的Http请求），而新的页面是不存在的（后端未配置的话），导致404。
先简述一下在浏览器上输入IP或域名后发生的事情（有点面试题的味道了嗷🥴），按下回车之后，浏览器发出的http去请求html文件，在通过一系列的转发和寻址解析后，被目标IP所在服务器上的80端口（默认）接收，这个时候，问题来了哈，服务器的80接口拿到Http请求后，它不知道要去返回什么，这个时候就需要Nginx进行静态资源代理，告诉服务器返回什么静态文件
Nginx
对于一般的项目部署，我们需要处理nginx.conf配置文件
该文件，需要知道的如下
....
# http 是指令块，针对http网络传输的一些指令配置
http {
#文件扩展名与文件类型映射表
include mime.types;
#设置客户端与服务端请求的超时时间
keepalive_timeout 65;
# 开启压缩功能，目的：提高传输效率，节省带宽
gzip on
server {
#监听端口
listen 80;
#服务命名，最好就是用这个服务器的域名命名
server_name localhost;
#指令块，配置外部访问资源和实际资源的对应关系
location /{
root /usr/blog; #表示静态资源所在的目录
index index.html index.htm; #访问这个路径对应的默认静态资源文件或者网页
}
}
}
location
语法
location [=|~|~*|^~|@] uri { ... }
location @name { ... }
- =：表示精确匹配
- ~：表示区分大小写正则匹配
- ~*：表示不区分大小写正则匹配
- ^~：表示 URI 以某个常规字符串开头
- !~：表示区分大小写正则不匹配
- !~*：表示不区分大小写正则不匹配
- /：通用匹配，任何请求都会匹配到
常用匹配规则
# 将所有请求直接转发给服务器的9090端口
location = / {
proxy_pass http://127.0.0.1:9090/;
}
# 目录匹配
location ^~ /static/ {
root /webroot/static/;
}
# 后缀匹配
location ~* .(gif|jpg|jpeg|png|css|js|ico)$ {
root /webroot/res/;
}
# 将/account/开始的请求转发给Account服务器
location /account/ {
proxy_pass http://127.0.0.1:8080/
}
# 将/order/开始的请求转发给Order服务器
location /order/ {
proxy_pass http://127.0.0.1:9090/
}
root 与 alias
两者区别在于 nginx 如何解释 location 后面的 url
[root]
语法：root path
默认值：root html
配置段：http、server、location、if
处理结果：root 路径＋ location 路径
[alias]
语法：alias path
配置段：location
处理结果：使用 alias 路径替换 location 路径
# 返回/www/root/html/t/a.html的文件
location ^~ /t/ {
root /www/root/html/;
}
# 返回/www/root/html/new_t/a.html的文件
# 把location后面配置的路径丢弃掉，把当前匹配到的目录指向到指定的目录。
location ^~ /t/ {
alias /www/root/html/new_t/;
}
解决刷新后出现404的问题
由上面的知识可以知道，刷新后，浏览器根据当前的url去请求html文件，但是SPA只有一个html文件，所以需要在nginx.conf的对应location里配置一行代码 try_files $uri $uri/ /index.html; 告诉nginx如果按顺序检查文件是否存在，若不存在则重定向到index.html文件
总结
本来只是一个自己部署项目问题的排查，实际只需要一行代码就能解决问题，但解决问题只是最基础的。更需要的是通过这个问题去补充更多自己不了解的东西。只有这样才能学的更多，不能只是头痛医头，脚痛医脚。
以上就是Nginx解决history模式下页面刷新404问题示例的详细内容，更多关于Nginx history页面刷新404的资料请关注IT俱乐部其它相关文章！
