广告位联系
返回顶部
分享到

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

nginx 来源:互联网 作者:佚名 发布时间:2022-10-10 20:55:20 人浏览
摘要

前置知识 单页应用(SPA - single page application) 只在第一次加载页面时,返回唯一的html页面和它的公共静态资源,后续的页面跳转都不会从服务端拿html文件。(hash和history路由实现浏览器

前置知识

  • 单页应用(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配置文件
该文件,需要知道的如下

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

....

# 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

语法

1

2

location [=|~|~*|^~|@] uri { ... }

location @name { ... }

  • =:表示精确匹配
  • ~:表示区分大小写正则匹配
  • ~*:表示不区分大小写正则匹配
  • ^~:表示 URI 以某个常规字符串开头
  • !~:表示区分大小写正则不匹配
  • !~*:表示不区分大小写正则不匹配
  • /:通用匹配,任何请求都会匹配到

常用匹配规则

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

# 将所有请求直接转发给服务器的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 路径

1

2

3

4

5

6

7

8

9

# 返回/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文件

总结

本来只是一个自己部署项目问题的排查,实际只需要一行代码就能解决问题,但解决问题只是最基础的。更需要的是通过这个问题去补充更多自己不了解的东西。只有这样才能学的更多,不能只是头痛医头,脚痛医脚。


版权声明 : 本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权, 违法违规的内容, 请发送邮件至2530232025#qq.cn(#换@)举报,一经查实,本站将立刻删除。
原文链接 : https://juejin.cn/post/7151688437106491429
相关文章
  • 本站所有内容来源于互联网或用户自行发布,本站仅提供信息存储空间服务,不拥有版权,不承担法律责任。如有侵犯您的权益,请您联系站长处理!
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计