nginx项目web页面刷新出现404

最新推荐文章于 2025-06-25 12:16:43 发布

原创最新推荐文章于 2025-06-25 12:16:43 发布 · 5.3k 阅读

3 ·

CC 4.0 BY-SA版权

博客指出登录web平台后点击刷新会出现404错误，解决方法是在nginx配置文件中加入特定配置，重启nginx，清除浏览器缓存，之后在web平台上点击刷新就不会出现该错误。

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

问题：登录web平台后点击刷新会出现404错误

解决方法：

#在nginx配置文件中加入下面的配置

#然后重启nginx

#再然后浏览器清楚缓存

#在web平台上点击刷新就不会了

------end------

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

木星学习者

关注关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

NGINX 部署项目时，遇到刷新页面导致 404

King Saj

06-05

2090

通过以上配置，你的 NGINX 将正确处理所有请求，避免刷新页面导致的 404 错误。此时，所有的 URL 请求都会被重定向到。，并由前端路由器（如 React Router 或 Vue Router）处理具体的路由。首先，确保你的项目已经构建完毕，并且所有静态文件（如。文件等）都位于一个目录下，例如。

宝塔nginx部署前端页面刷新报404

月亮被咬碎成星星的博客

01-14

2888

已解决

参与评论您还未登录，请先登录后发表或查看评论

nginx刷新显示404

qq_39535439的博客

11-17

9262

nginx部署完项目后，访问时刷新后就会出现404的报错界面(不是首页根目录刷新时)

serviceWorker解决前端部署后404问题

最新发布

搬代码的农民的博客

06-25

927

前端部署后用户404问题的完美解决方案本文针对现代前端应用部署后常见的用户404问题，提出了一套完整的解决方案。传统方法如强制刷新或轮询版本号存在诸多痛点，经过三种方案对比（轮询、WebSocket、ServiceWorker），最终采用了基于ServiceWorker的智能检测方案，该方案具有后台持续监控、优雅UI提示、支持微前端架构等特点。实现步骤包括：构建时生成版本文件、ServiceWorker后台检测、友好UI提示以及智能刷新机制。这套方案解决了浏览器缓存、路由失效和chunk文件变化等问题，显

https://localhost/index 配置的nginx，一刷新就报404了

志存高远

11-15

4895

index.html。

vue下使用nginx刷新页面404

weixin_30420305的博客

07-18

281

nginx 是一个代理的服务器。出现的问题：写好的页面通过nginx作为代理的服务器给别的同事看的时候发现了新写的页面打开就404，并且从其他页面跳转可以看到但是刷新页面就404。解决方法：在文件中的nginx.conf文件中修改，代码如下 server { listen YYYY; //自己设置的端口号 server_name 192...

关于nginx页面刷新404的问题

qinqinde123的博客

05-29

235

关于nginx页面刷新404的问题，记录一下 location / { root D:/nginx/nginx-1.19.0/dist; index index.html index.htm; try_files uriuriuri/ /index.html; ##解决页面刷新404问题 }

vue下使用nginx刷新页面404的问题解决

10-16

而nginx默认情况下没有配置对这种路由的处理方式，因此当用户直接访问某个路由路径（如***/user）后进行页面刷新时，nginx会尝试寻找对应的文件（如user）而不是回退到index.html，从而返回404错误。为了解决这个...

uniapp(vue)打包web项目页面刷新后报404解决方案

Jiaberrr的博客

10-12

2305

在使用uniapp进行跨平台开发时，不少开发者会遇到页面刷新后出现404错误的问题。本文将为大家详细解析这一问题的原因及解决方案，帮助大家顺利解决此类问题。

nignx适配ruoyi刷新404问题

06-26

标题 "nignx适配ruoyi刷新404问题" 涉及的是在使用Nginx作为反向代理服务器时，与Ruoyi框架（一个基于Java开发的后台管理系统）集成过程中出现的页面刷新返回404错误的问题。这个问题通常出现在静态资源的处理或者...

Vue/React单页面应用部署到nginx服务器时，错误解决以及刷新404

10-29

1444

一般来说，SPA 通过前端路由来管理页面导航，而刷新页面时，Nginx 直接尝试加载当前 URL 的资源，却找不到对应的文件，从而导致 404 错误。将项目部署到var/www目录中，然后修改nginx里面的root路径地址为var/www中。这样，当用户在登录页面或其他页面刷新时，Nginx 会将请求重定向到。将 Nginx 配置修改为以下内容，以确保所有请求都可以重定向到。可能是没有将dist文件夹放置到var/www/目录中，因为。，让前端的路由逻辑来处理 URL。，即用户请求的资源。

nginx部署前端项目时，正常访问前端页面成功后，浏览器刷新报404解决访问

weixin_62818371的博客

04-23

2650

，而单页应用（SPA）的路由由前端框架处理，实际不存在该路径的文件，导致404。• 自动化部署：通过CI/CD工具确保静态文件路径和Nginx配置的一致性。或刷新页面时，Nginx会尝试在服务器上查找对应的物理文件（如。配置可能未正确指向静态资源目录，或文件实际未部署到指定路径。指令，将未匹配的请求重定向到前端入口文件（如。• 作用：当Nginx找不到请求的文件时，返回。实时查看错误日志，确认是否仍有文件路径错误。• 资源版本号：为静态文件添加版本号（如。）未被代理到正确的入口文件（如。

Nginx与history路由模式：刷新页面404问题

席木木的博客

02-08

6738

Nginx与history路由模式：刷新页面404问题，通过nginx服务端配置解决

nginx 正常访问，刷新404

liudongyang123的博客

07-11

1220

部署完成前端服务，浏览器正常访问没有问题，但是F5刷新的时候，会提示404，丢失了资源。

服务器部署，用 nginx 部署后页面刷新 404 问题，宝塔面板修改（修改 nginx.conf 配置文件）

LRF200307的博客

07-14

2209

解决方法：修改 nginx 配置，我这边用的宝塔部署，所以改配置也是相对简单的，只需要加一行代码就行。如果你的项目使用了 vue，并使用了路由且路由配置为 history 模式，就会出现这种情况。当你使用 nginx 部署前端项目时，发现页面刷新或不用根目录访问页面时，出现404页面。2. 在设置中的配置文件，server中添加相应代码即可，1. 部署网站后，在宝塔网站中点击设置。3. 保存立即生效，快去试试吧。

Nginx部署项目刷新404问题

bighead的博客

09-01

1066

之前的Nginx配置如下 server { listen 80; server_name localhost; #charset koi8-r; #access_log logs/host.access.log main; location / { root D:/police/terminal-client; index index.html in

前端部署nginx刷新后404，解决Nginx刷新页面后404的问题

热门推荐

一个还不成熟、正在努力成长的博客小站。

06-21

4万+

使用Nginx部署后，登录页面刷新一下就出来404，如下图：刷新以后，页面变成404 Not Found查看了一下nginx配置，出现问题的配置是这样的：

解决部署nginx 刷新页面404问题

ew45218的博客

05-25

361

添加：try_files $uri $uri/ /index.html; 位置如图所示。然后再重启。

nginx 单页面应用刷新404

08-08

Nginx作为一款高性能的Web服务器和反向代理，常用于部署单页面应用程序（SPA，Single Page Application）。当用户在SPA中进行页面刷新时，由于SPA的特点，实际请求的可能是静态资源或者是API请求，并不是传统意义上的HTML页面。如果SPA没有正确的配置，Nginx可能会返回404 Not Found错误，因为Nginx找不到对应的具体文件。解决这个问题通常需要以下几个步骤： 1. 配置Nginx：对于SPA，应设置Nginx为动态内容处理，可以将所有非静态资源（如.js、.html、.json等）都指向应用程序的入口文件（比如index.html），然后让SPA内部处理路由变化。例如： ```nginx location / { try_files $uri $uri/ @proxy; } location @proxy { proxy_pass http://yourapp.com; # 或者域名 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } ``` 2. 使用hash模式或noredirect：为了防止URL改变而丢失浏览器历史记录，可以启用`location ~* \.(?:js|css)$ { add_header Content-Security-Policy upgrade-insecure-requests; }`，并设置Nginx使用哈希片段(`#`)来匹配SPA内部路由，而不是直接404。 3. SPA配置：确保SPA在路由变化时能够通过前端路由管理器更新URL，同时处理404状态码，显示友好的提示信息。如果你遇到类似问题，检查以上配置并确保SPA有适当的错误处理机制是非常重要的。