Web项目部署后浏览器刷新返回Nginx的404错误对应解决方案

最新推荐文章于 2024-07-11 16:43:54 发布

limou3434

最新推荐文章于 2024-07-11 16:43:54 发布

阅读量1.6k

点赞数 19

分类专栏：杂文文章标签：前端 nginx android

本文链接：https://blog.csdn.net/m0_73168361/article/details/139884356

版权

杂文专栏收录该内容

2 篇文章 0 订阅

订阅专栏

data: 2024/6/22 16:05:34 周六 limou3434

叠甲：以下文章主要是依靠我的实际编码学习中总结出来的经验之谈，求逻辑自洽，不能百分百保证正确，有错误、未定义、不合适的内容请尽情指出！

概要：…

资料：本文参考了这份博文您可前去一看。

1.源头

在帮朋友部署和测试项目的时候，遇到一个比较奇葩的问题，页面可以成功访问，但是刷新就返回 404。

2.排错

首先我是使用了 fiddler Classic 进行抓包，我很快发现了刷新前和刷新后的 http 请求是完全不一样的，这个时候我就察觉到：他们做的应该是一个前后端分离的项目，并且 404 错误返回是 Nginx 默认的返回页面，而不是他们项目中自己设计的 404 页面（如下是他们项目的 404 页面）。

在这里插入图片描述

此时我就有一个推测，这个很可能和他们的 Nginx 配置有关系…于是我打开了他们的 Nginx 配置（他们使用的是宝塔部署，不过您也可以直接查找 Linux 中的 Nginx 配置文件）。

# 有问题的 Nginx 配置
server
{
    listen PORT; # 由于是朋友的项目还未公开就隐去了端口号, 统一使用 PORT 表示
    server_name IP; # 由于是朋友的项目还未公开就隐去了地址, 统一使用 IP 表示
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/IP;
    # CERT-APPLY-CHECK--START
    # 用于 SSL 证书申请时的文件验证相关配置 -- 请勿删除
    include /www/server/panel/vhost/nginx/well-known/IP.conf;
    # CERT-APPLY-CHECK--END

    # SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则
    # error_page 404/404.html;
    # SSL-END

    # ERROR-PAGE-START  错误页配置，可以注释、删除或修改
    # error_page 404 /404.html;
    # error_page 502 /502.html;
    # ERROR-PAGE-END

    # PHP-INFO-START  PHP 引用配置，可以注释或修改
    include enable-php-00.conf;
    # PHP-INFO-END

    # REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
    include /www/server/panel/vhost/rewrite/IP.conf;
    # REWRITE-END

    # 禁止访问的文件或目录
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.env|\.svn|\.project|LICENSE|README.md)
    {
        return 404;
    }

    # 一键申请 SSL 证书验证目录相关设置
    location ~ \.well-known{
        allow all;
    }

    # 禁止在证书验证目录放入敏感文件
    if ( $uri ~ "^/\.well-known/.*\.(php|jsp|py|js|css|lua|ts|go|zip|tar\.gz|rar|7z|sql|bak)$" ) {
        return 403;
    }

    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        error_log /dev/null;
        access_log /dev/null;
    }

    location ~ .*\.(js|css)?$
    {
        expires      12h;
        error_log /dev/null;
        access_log /dev/null;
    }
       
    access_log  /www/wwwlogs/IP.log;
    error_log  /www/wwwlogs/IP.error.log;
}

嗯…果然只返回了 index 这个单体页面。

3.原因

在使用 Nginx 做反向代理服务器且部署了一些关于 Vue、Reactor 项目时，有时会遇到页面成功返回，但是在浏览器中刷新出现 404 的问题。我不是特别了解这些 js 库的使用，但是我曾经做过一些 QML 文件的路由跳转机制，这种跳转机制其实就是通过在一个 .qml 文件中进行路由配置来达到页面跳转的目的。

这在桌面客户端可能还没有什么问题，但是在 Web 应用中使用了 Vue、Reactor 时，由于前端开发者只开发了一个 index，然后通过路由跳转来得到前后端分离的效果，这其实就是一种 单页应用(SPA)。

因此如果用户在浏览器中请求网站时，其实就是浏览器包装 url:port 做 http 请求的时候。而由于前后端分离，后端代码只返回一个 index，而其他页面的跳转交给前端来实现，后端只需要专注于和前端约定好需要返回给页面什么样的数据即可。

但这样就会出现一个很尴尬的问题，如果用户在浏览器中跳转到了该网站中的其他页面（例如登录页面），刷新浏览器时，浏览器就会误认为用户请求的 url:port/login 在远端服务器中，就会重新对 url 进行包装，向远端服务器进行请求。

可这是单页应用，服务器上只有一个 index，因此必然是请求不到对应的资源，返回的自然就是 404 了。

4.解决

想要解决这个问题，只需要让 Nginx 在对找不到的路径上的资源时，把用户的请求重定向到 index 中即可，交给分离出来的前端代码进行处理就行了，修改 Nginx 配置文件内容如下…

# 没问题的 Nginx 配置
server
{
    listen PORT; # 由于是朋友的项目还未公开就隐去了端口号, 统一使用 PORT 表示
    server_name IP; # 由于是朋友的项目还未公开就隐去了地址, 统一使用 IP 表示
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/IP;
    #CERT-APPLY-CHECK--START
    # 用于SSL证书申请时的文件验证相关配置 -- 请勿删除
    include /www/server/panel/vhost/nginx/well-known/IP.conf;
    #CERT-APPLY-CHECK--END

    #SSL-START SSL相关配置，请勿删除或修改下一行带注释的404规则
    #error_page 404/404.html;
    #SSL-END

    #ERROR-PAGE-START  错误页配置，可以注释、删除或修改
    #error_page 404 /404.html;
    #error_page 502 /502.html;
    #ERROR-PAGE-END

    #PHP-INFO-START  PHP 引用配置，可以注释或修改
    include enable-php-00.conf;
    #PHP-INFO-END

    #REWRITE-START URL重写规则引用,修改后将导致面板设置的伪静态规则失效
    include /www/server/panel/vhost/rewrite/IP.conf;
    #REWRITE-END

    #禁止访问的文件或目录
    location ~ ^/(\.user.ini|\.htaccess|\.git|\.env|\.svn|\.project|LICENSE|README.md)
    {
        return 404;
    }

    #一键申请SSL证书验证目录相关设置
    location ~ \.well-known{
        allow all;
    }

    #禁止在证书验证目录放入敏感文件
    if ( $uri ~ "^/\.well-known/.*\.(php|jsp|py|js|css|lua|ts|go|zip|tar\.gz|rar|7z|sql|bak)$" ) {
        return 403;
    }

    location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
    {
        expires      30d;
        error_log /dev/null;
        access_log /dev/null;
    }

    location ~ .*\.(js|css)?$
    {
        expires      12h;
        error_log /dev/null;
        access_log /dev/null;
    }
    
    ### begin-2024-06-22-mod: 解决单页应用路由刷新 404 问题
    location / { # 该块匹配所有的请求
      try_files $uri $uri/ @rewrites; # 尝试顺序查找文件和目录, 如果都失败则定义重写规则
      index index.html;
    }
 
    location @rewrites {
      rewrite ^.*$ /index.html last; # 对正则模式 ^.*$ 进行匹配(匹配任意长度的字符串), 这一句就是重写规则, 把所有的请求重定向到 index.html 中(故就交给入口文件来处理), 这里的 last 是重写规则的选项之一, 主要作用是一旦完成重写规则, 就停止当前 location 中的请求处理, 把请求传递给下一阶段匹配的 location 块中...
    }
    ### end: 修改后成功解决刷新和重写路由问题
    
    access_log  /www/wwwlogs/IP.log;
    error_log  /www/wwwlogs/IP.error.log;
}

至此解决问题，刷新页面也不会返回 Nginx 的 404 错误，同时即便前端用户真的请求了错误的资源，也只会返回项目中定义的 404 页面。