目录前置知识Nginxlocation常用匹配规则root 与 alias解决刷新后出现404的问题总结前置知识 单页应用(SPA - single page application
history模式下,因为url改变了,此时如果手动刷新页面,浏览器认为是请求一个新的页面(发起新的Http请求),而新的页面是不存在的(后端未配置的话),导致404。
先简述一下在浏览器上输入IP或域名后发生的事情(有点面试题的味道了嗷?),按下回车之后,浏览器发出的http去请求html文件,在通过一系列的转发和寻址解析后,被目标IP所在服务器上的80端口(默认)接收,这个时候,问题来了哈,服务器的80接口拿到Http请求后,它不知道要去返回什么,这个时候就需要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 [=|~|~*|^~|@] uri { ... }
location @name { ... }
# 将所有请求直接转发给服务器的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/
}
两者区别在于 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/;
}
由上面的知识可以知道,刷新后,浏览器根据当前的url去请求html文件,但是SPA只有一个html文件,所以需要在nginx.conf的对应location里配置一行代码 try_files $uri $uri/ /index.html;
告诉nginx如果按顺序检查文件是否存在,若不存在则重定向到index.html文件
本来只是一个自己部署项目问题的排查,实际只需要一行代码就能解决问题,但解决问题只是最基础的。更需要的是通过这个问题去补充更多自己不了解的东西。只有这样才能学的更多,不能只是头痛医头,脚痛医脚。
以上就是Nginx解决history模式下页面刷新404问题示例的详细内容,更多关于Nginx history页面刷新404的资料请关注编程网其它相关文章!
--结束END--
本文标题: Nginx解决history模式下页面刷新404问题示例
本文链接: https://www.lsjlt.com/news/168946.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑,方便收藏和打印~
2024-04-30
2024-04-30
2024-04-30
2024-04-29
2024-04-29
2024-04-29
2024-04-18
2024-04-17
2024-04-11
2024-04-08
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0