nginx部署后，出现刷新或返回页面报404

最新推荐文章于 2025-04-23 22:47:39 发布
最新推荐文章于 2025-04-23 22:47:39 发布
阅读量1.3k 收藏 2
点赞数
文章标签： nginx 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ying456baby/article/details/129396518
版权
在nginx配置中添加try_files指令可以解决页面刷新返回404的错误。具体做法是在location块中，设置try_files$uri$uri//index.html，这将确保当请求的资源不存在时，服务器会尝试寻找并返回index.html，有效处理单页应用的路由问题。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

nginx部署后，出现刷新页面或者页面返回报404

解决方法：

location中增加  try_files $uri $uri/ /index.html; #解决页面刷新404问题

location / {

root /data/XXX-Web;

index index.html index.htm;

try_files $uri $uri/ /index.html; #解决页面刷新404问题

}

NGINX 部署项目时，遇到刷新页面导致 404
King Saj
06-05 1949
通过以上配置，你的 NGINX 将正确处理所有请求，避免刷新页面导致的 404 错误。此时，所有的 URL 请求都会被重定向到。，并由前端路由器（如 React Router 或 Vue Router）处理具体的路由。首先，确保你的项目已经构建完毕，并且所有静态文件（如。文件等）都位于一个目录下，例如。
httpslocalhostindex 配置的nginx，一刷新就报404了
rgrgrwfe的博客
12-28 1155
index.html。
Nginx与history路由模式：刷新页面404问题
席木木的博客
02-08 6545
Nginx与history路由模式：刷新页面404问题，通过nginx服务端配置解决
https://localhost/index 配置的nginx，一刷新就报404了
志存高远
11-15 4681
index.html。
nginx部署前端项目时，正常访问前端页面成功后，浏览器刷新报404解决访问
最新发布
weixin_62818371的博客
04-23 1169
，而单页应用（SPA）的路由由前端框架处理，实际不存在该路径的文件，导致404。• 自动化部署：通过CI/CD工具确保静态文件路径和Nginx配置的一致性。或刷新页面时，Nginx会尝试在服务器上查找对应的物理文件（如。配置可能未正确指向静态资源目录，或文件实际未部署到指定路径。指令，将未匹配的请求重定向到前端入口文件（如。• 作用：当Nginx找不到请求的文件时，返回。实时查看错误日志，确认是否仍有文件路径错误。• 资源版本号：为静态文件添加版本号（如。）未被代理到正确的入口文件（如。
nginx 刷新之后 404
iteye_3750的博客
03-07 2933
nginx 刷新之后 404
nginx配置：部署后刷新产生404错误
2201_75396743的博客
09-24 1854
在这里记录一下前端部署过程中，遇到的浏览器刷新出现的nginx_error问题。将前端部署到服务器上之后，页面之间可以相互跳转，但是只要一点击浏览器刷新页面之后就会出现红红的大大的nginx_error。
nginx刷新显示404
qq_39535439的博客
11-17 9152
nginx部署完项目后，访问时 刷新后 就会出现404的报错界面(不是首页根目录刷新时)
linux环境配置nginx导致页面不刷新的解决方法
09-15
在Linux环境中配置Nginx服务器时，可能会遇到一个常见的问题，即页面内容无法正常刷新，总是显示旧的缓存内容。这个问题通常是由于Nginx的缓存机制设置不当造成的。Nginx作为一个高效的反向代理服务器，其内置的缓存...
vue下使用nginx刷新页面404的问题解决
10-16
以上步骤可以有效解决使用Vue.js和nginx部署的单页面应用（SPA）在刷新页面时出现404错误的问题。这种配置使得nginx可以正确地处理所有前端路由的请求，避免了用户刷新页面时服务器尝试访问不存在的文件路径，从而...
nignx适配ruoyi刷新404问题
06-26
标题 "nignx适配ruoyi刷新404问题" 涉及的是在使用Nginx作为反向代理服务器时，与Ruoyi框架（一个基于Java开发的后台管理系统）集成过程中出现的页面刷新返回404错误的问题。这个问题通常出现在静态资源的处理或者...
【Nginx】 nginx 项目上线后刷新页面丢失 404
fruge365的博客
12-05 2076
nginx 项目上线后刷新页面丢失 404
安装nginx以及部署前端代码并就解决windos版刷新出现404
y516369的博客
07-27 1万+
在Nginx中，如果服务器需要提供安全网页时就需要用到OpenSSL库，所以我们需要对OpenSSL的库文件及它的开发安装包进行一个安装。（2）下载Nginx安装包wget https://nginx.org/download/nginx-1.16.1.tar.gz(wget命令初始是没有的，使用yum install wget安装wget)zlib库提供了开发人员的压缩算法，在Nginx的各个模块中需要使用gzip压缩，所以我们也需要提前安装其库及源代码zlib和zlib-devel。
前端部署nginx刷新后404，解决Nginx刷新页面后404的问题
热门推荐
一个还不成熟、正在努力成长的博客小站。
06-21 4万+
使用Nginx部署后，登录页面刷新一下就出来404，如下图：刷新以后 ，页面变成404 Not Found查看了一下nginx配置，出现问题的配置是这样的：
Nginx部署代理访问网站正常，进入页面后刷新出现404问题
ybb_ymm的专栏
02-09 9025
今天遇到一个奇葩问题，就是我们nginx代理访问我们的官网，但是当我们在进入一个页面后，再次刷新请求的时候报错404。比如：访问官网正常，当的时候，则会报错404。这是什么原因呢？起始很简单就是你的nginx配置上没有添加重定向跳转。
nginx 作为web服务器刷新404
zuidenaoshi的专栏
02-24 274
nginx 作为web项目刷新浏览器时404问题。
Nginx部署项目 刷新404问题
KeepLearningDay的博客
08-24 1983
*之前的Nginx配置如下**
nginx部署vue刷新页面问题
11-01
当你使用Nginx部署Vue.js应用时，有时可能会遇到页面刷新导致空白或者404的问题。这是因为Nginx默认配置下，对于静态文件如HTML、CSS和JavaScript，它会直接发送给浏览器，而不是通过服务器处理。而对于非静态资源，比如Vue的路由请求，Nginx需要将请求转发到Node.js应用。 解决这个问题通常需要以下步骤： 1. **配置Nginx**： - 配置`location`块，将所有以`.html`结尾的请求指向你的Vue应用的根目录，例如： ```nginx location / { try_files $uri $uri/ /index.html; } ``` - 对于其他非静态资源，可以设置一个反向代理，将其定向到你的应用程序（假设后端运行在8080端口）： ```nginx location /api/ { proxy_pass http://localhost:8080; } ``` 2. **Vue路由模式**： - 确保Vue应用是以hash模式（`#`开头的URL）而非history模式（去掉`#`）。因为history模式需要服务器支持HTML5 History API，而Nginx可能无法自动处理这些改变历史记录的请求。 3. **刷新问题**： - 如果你仍然遇到刷新页面空白，可以在Nginx中启用“如果不存在”缓存控制（`if_not_found`）： ```nginx location / { try_files $uri $uri/ /index.html =404; } ``` - 这样当用户访问不存在的路径时，Nginx不会返回404，而是返回index.html，避免了刷新时的空白页。 **相关问题--:** 1. 如何在Nginx中启用gzip压缩来提高性能？ 2. Vue.js项目如何设置跨域以让Nginx支持？ 3. 如果我想在Nginx中配置HTTPS，应该如何操作？
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值