Nginx解决history模式下页面刷新404问题示例

 更新时间:2022年10月08日 16:12:26   作者:是小福呀  
这篇文章主要为大家介绍了Nginx解决history模式下页面刷新404问题示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

前置知识

  • 单页应用(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的资料请关注脚本之家其它相关文章!

相关文章

  • 如何利用Nginx防止IP地址被恶意解析详解

    如何利用Nginx防止IP地址被恶意解析详解

    这篇文章主要给大家介绍了关于如何利用Nginx防止IP地址被恶意解析的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Nginx具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2020-06-06
  • 如何使用Nginx和uwsgi在自己的服务器上部署python的flask项目

    如何使用Nginx和uwsgi在自己的服务器上部署python的flask项目

    Nginx 是一个高性能的 HTTP 和反向代理服务,其特点是占有内存少,并发能力强,事实上nginx的并发能力在同类型的网页服务器中表现较好,这篇文章主要介绍了如何使用Nginx和uwsgi在自己的服务器上部署python的flask项目,需要的朋友可以参考下
    2023-11-11
  • Nginx的405 not allowed错误解决方法

    Nginx的405 not allowed错误解决方法

    本文主要介绍了Nginx的405 not allowed错误解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-05-05
  • nginx修改默认运行80端口的方法

    nginx修改默认运行80端口的方法

    这篇文章主要给大家介绍了关于nginx是如何修改默认运行80端口的方法,文中介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-04-04
  • Nginx 服务器安装及配置文件详解介绍

    Nginx 服务器安装及配置文件详解介绍

    这篇文章主要介绍了Nginx 服务器安装及配置文件详解介绍,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2016-11-11
  • Nginx服务器下配置个性二级域名及多个域名的实例讲解

    Nginx服务器下配置个性二级域名及多个域名的实例讲解

    这篇文章主要介绍了Nginx服务器下配置个性二级域名及多个域名的实例讲解,注意一下rewrite的写法规则,需要的朋友可以参考下
    2016-01-01
  • 如何让Nginx支持中文文件名具体设置步骤

    如何让Nginx支持中文文件名具体设置步骤

    想让Nginx支持中文文件名首先得让你的系统有中语语言包,设置前可以执行:locale 看一下,如果显示是en_US.UTF-8,即是正常,不用按下面的步骤设置
    2013-06-06
  • nginx实现多geoserver服务的负载均衡的示例代码

    nginx实现多geoserver服务的负载均衡的示例代码

    本文主要介绍了nginx实现多geoserver服务的负载均衡的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-05-05
  • Nginx漏洞复现的问题案例解析

    Nginx漏洞复现的问题案例解析

    这篇文章主要介绍了Nginx解析漏洞复现,这个漏洞其实是由php.ini中cgi.fix pathinfo选项与php-fpm的配置一起导致的,防范的话,只需在php-fpm配置文件中设置security.limit_extensions=.php,重启一下服务即可,本文讲解的非常详细,需要的朋友可以参考下
    2024-01-01
  • Nginx配置详解(推荐)

    Nginx配置详解(推荐)

    Nginx功能丰富,可作为HTTP服务器,也可作为反向代理服务器,邮件服务器。支持FastCGI、SSL、Virtual Host、URL Rewrite、Gzip等功能
    2017-05-05

最新评论