Nginx怎么解决history模式下页面刷新404问题

发布时间:2022-10-10 09:09:09 作者:iii
来源:亿速云 阅读:355

这篇文章主要介绍“Nginx怎么解决history模式下页面刷新404问题”,在日常操作中,相信很多人在Nginx怎么解决history模式下页面刷新404问题问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Nginx怎么解决history模式下页面刷新404问题”的疑惑有所帮助!接下来,请跟着小编一起来学习吧!

前置知识

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 { ... }

常用匹配规则

   # 将所有请求直接转发给服务器的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问题”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注亿速云网站,小编会继续努力为大家带来更多实用的文章!

推荐阅读:
  1. wordpress配置固定链接nginx访问404问题解决方
  2. vue-cli history模式如何实现tomcat部署报404的解决方式

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

nginx history

上一篇:Python垃圾回收机制中的引用计数是什么

下一篇:Golang Mutex互斥锁实例代码分析

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》