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

本文主要是介绍Web项目部署后浏览器刷新返回Nginx的404错误对应解决方案,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!


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


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

文章目录

  • 1.源头
  • 2.排错
  • 3.原因
  • 4.解决

概要:…

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


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:porthttp 请求的时候。而由于前后端分离,后端代码只返回一个 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;
}

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


结语:…

这篇关于Web项目部署后浏览器刷新返回Nginx的404错误对应解决方案的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1087538

相关文章

闲置电脑也能活出第二春?鲁大师AiNAS让你动动手指就能轻松部署

对于大多数人而言,在这个“数据爆炸”的时代或多或少都遇到过存储告急的情况,这使得“存储焦虑”不再是个别现象,而将会是随着软件的不断臃肿而越来越普遍的情况。从不少手机厂商都开始将存储上限提升至1TB可以见得,我们似乎正处在互联网信息飞速增长的阶段,对于存储的需求也将会不断扩大。对于苹果用户而言,这一问题愈发严峻,毕竟512GB和1TB版本的iPhone可不是人人都消费得起的,因此成熟的外置存储方案开

这15个Vue指令,让你的项目开发爽到爆

1. V-Hotkey 仓库地址: github.com/Dafrok/v-ho… Demo: 戳这里 https://dafrok.github.io/v-hotkey 安装: npm install --save v-hotkey 这个指令可以给组件绑定一个或多个快捷键。你想要通过按下 Escape 键后隐藏某个组件,按住 Control 和回车键再显示它吗?小菜一碟: <template

如何用Docker运行Django项目

本章教程,介绍如何用Docker创建一个Django,并运行能够访问。 一、拉取镜像 这里我们使用python3.11版本的docker镜像 docker pull python:3.11 二、运行容器 这里我们将容器内部的8080端口,映射到宿主机的80端口上。 docker run -itd --name python311 -p

阿里开源语音识别SenseVoiceWindows环境部署

SenseVoice介绍 SenseVoice 专注于高精度多语言语音识别、情感辨识和音频事件检测多语言识别: 采用超过 40 万小时数据训练,支持超过 50 种语言,识别效果上优于 Whisper 模型。富文本识别:具备优秀的情感识别,能够在测试数据上达到和超过目前最佳情感识别模型的效果。支持声音事件检测能力,支持音乐、掌声、笑声、哭声、咳嗽、喷嚏等多种常见人机交互事件进行检测。高效推

安卓链接正常显示,ios#符被转义%23导致链接访问404

原因分析: url中含有特殊字符 中文未编码 都有可能导致URL转换失败,所以需要对url编码处理  如下: guard let allowUrl = webUrl.addingPercentEncoding(withAllowedCharacters: .urlQueryAllowed) else {return} 后面发现当url中有#号时,会被误伤转义为%23,导致链接无法访问

在cscode中通过maven创建java项目

在cscode中创建java项目 可以通过博客完成maven的导入 建立maven项目 使用快捷键 Ctrl + Shift + P 建立一个 Maven 项目 1 Ctrl + Shift + P 打开输入框2 输入 "> java create"3 选择 maven4 选择 No Archetype5 输入 域名6 输入项目名称7 建立一个文件目录存放项目,文件名一般为项目名8 确定

Java Web指的是什么

Java Web指的是使用Java技术进行Web开发的一种方式。Java在Web开发领域有着广泛的应用,主要通过Java EE(Enterprise Edition)平台来实现。  主要特点和技术包括: 1. Servlets和JSP:     Servlets 是Java编写的服务器端程序,用于处理客户端请求和生成动态网页内容。     JSP(JavaServer Pages)

BUUCTF靶场[web][极客大挑战 2019]Http、[HCTF 2018]admin

目录   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 [web][HCTF 2018]admin 考点:弱密码字典爆破 四种方法:   [web][极客大挑战 2019]Http 考点:Referer协议、UA协议、X-Forwarded-For协议 访问环境 老规矩,我们先查看源代码

Vue3项目开发——新闻发布管理系统(六)

文章目录 八、首页设计开发1、页面设计2、登录访问拦截实现3、用户基本信息显示①封装用户基本信息获取接口②用户基本信息存储③用户基本信息调用④用户基本信息动态渲染 4、退出功能实现①注册点击事件②添加退出功能③数据清理 5、代码下载 八、首页设计开发 登录成功后,系统就进入了首页。接下来,也就进行首页的开发了。 1、页面设计 系统页面主要分为三部分,左侧为系统的菜单栏,右侧

SpringBoot项目是如何启动

启动步骤 概念 运行main方法,初始化SpringApplication 从spring.factories读取listener ApplicationContentInitializer运行run方法读取环境变量,配置信息创建SpringApplication上下文预初始化上下文,将启动类作为配置类进行读取调用 refresh 加载 IOC容器,加载所有的自动配置类,创建容器在这个过程