前后端分离用nginx做代理服务器，刷新页面报404 解决方法

最新推荐文章于 2025-04-23 22:47:39 发布
最新推荐文章于 2025-04-23 22:47:39 发布
阅读量2k 收藏 2
点赞数 1
分类专栏： nginx 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/goxingman/article/details/115210090
版权
本文介绍了解决Vue前端项目中404错误的方法。第一种是在Nginx配置文件中添加特定指令，使代理找不到页面时转向index.html；第二种是在前端路由设置中加入'#'符号。

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

两种方法，第二种没验证，但是应该也可以

第一种：在nginx配置文件中加上一句话，作用就是nginx代理时候找不到页面会尝试访问这个指定页面，而前端vue项目的话，页面正好是有vue自己进行管理，所以就不会报错了

try_files $uri $uri/ /index.html;

第二种：在前端项目中，设置路由时候加上#，具体我还没试，按着这个思路加上应该就可以了，就类似下图这种

自签SSL证书配置Nginx代理Vue+SpringBoot前后端分离服务
Heartsuit的博客
10-29 2558
最近的一个小项目，部署在专网中，可是最近等保测评要求整改为HTTPS加密传输。像我们以前的部署在互联网上的项目都购买了域名，并在云服务商那里申请免费的。证书，这样在浏览器中会提示证书不安全，用户需要多操作一步添加例外才可以正常访问系统。好在可以满足等保的要求，可行那就开干。可是现在在专网中，而且没有域名，甚至没有。移除文件口令，输出到新的server.key（这时，需要输入第一步设置的密码）模块后，将前面生产的秘钥及证书放到一个目录中，我这里是。代理静态资源，以验证证书的有效性。的完整配置，最终实现。
前后端分离，nginx配置（多个接口分发，解决vue项目路由404问题）
小巧r的博客
09-21 1726
http { include mime.types; default_type application/octet-stream; #log_format main '$remote_addr - $remote_user [$time_local] "$request" ' # '$status $body_bytes_sent "$http_referer" ' # '"$ht
nginx代理后刷新显示404
热门推荐
maple的博客
02-15 4万+
通过首页进入访问页面正常，F5刷新之后出现错误如下图。 原因是因为web单页面开发模式，只有一个index.html入口，其他路径是前端路由去跳转的，nginx没有对应这个路径，当然就是404了。 一般nginx监听配置如下 现在知道原因，需要怎么处理呢？ location / { root /mydata/transfer/html/helper/dist; ...
nginx部署前端项目时，正常访问前端页面成功后，浏览器刷新报404解决访问
最新发布
weixin_62818371的博客
04-23 1504
，而单页应用（SPA）的路由由前端框架处理，实际不存在该路径的文件，导致404。• 自动化部署：通过CI/CD工具确保静态文件路径和Nginx配置的一致性。或刷新页面时，Nginx会尝试在服务器上查找对应的物理文件（如。配置可能未正确指向静态资源目录，或文件实际未部署到指定路径。指令，将未匹配的请求重定向到前端入口文件（如。• 作用：当Nginx找不到请求的文件时，返回。实时查看错误日志，确认是否仍有文件路径错误。• 资源版本号：为静态文件添加版本号（如。）未被代理到正确的入口文件（如。
解决nginx部署前端项目后刷新浏览器报错404的问题
初心不改
08-30 6032
问题：         Vue单页应用项目打包部署Nginx服务器后，刷新页面后，出现404。 原因：         加载单页应用后路由改变均由浏览器处理，而刷新时将会请求当前的链接，而Nginx无法找到对应的页面。 解决：        在Nginx配置文件nginx.conf中加入如下配置。(index.html根据实际页面配置) ...
Nginx反向代理返回404
lianpuzzz的博客
11-10 951
Nginx反向代理返回404
nginx配置反向代理出现404
qq_44688861的博客
03-07 2847
问题描述： 今天在配置博瑞网站的nginx反向代理的时候出现了404的错误 原因分析： 在反向代理的路径后面没有拼接/导致找不到路径 解决方案： 在后面加个/
springboot+vue2前后端分离 nginx代理 服务器部署
WOSHIKJ123的博客
11-30 1352
springboot+vue2 前后端分离 nginx代理 服务器部署
Glang+Vue实现RESTful API+前后端分离，Nginx反向代理解决跨域问题（一）
weixin_42560249的博客
03-02 1563
标题Glang+Vue实现RESTful API+前后端分离，Nginx反向代理解决跨域问题 概念引入 前后端分离架构如下图，后端只负责动态提供数据，而前端存放静态文件，使得后端服务器不必每次都返回一整个HTML页面，节省了时间开销和资源开销，提高了整个网站系统的性能。 　　RESTful架构，是目前最流行的一种互联网软件架构。它结构清晰、符合标准、易于理解、扩展方便，所以正得到越来越多网站的采用...
Nginx部署前后端分离项目,配置SSL证书，结果刷新报500异常
猿小白的博客
09-21 1万+
在之前还没有配置SSL证书的时候，项目使用一切正常，也不会出现什么刷新报500错误，就在今天，我进行了SSL证书配置之后，就显得不正常了，页面刷新会报500异常，经过一段时间排查，最终找到了产生问题的根本原因，简单来说就是因为nginx没有足够的权限来访问我们的系统文件，系统获取不到想要的页面就户出现路径找不到问题，资源路径错误，nginx就会报500错误。 解决办法：赋予我们的文件更高的权限，简单粗暴的命令就是chomd 777 资源目录 就可以解决Nginx 500异常 声明：此...
SpringBoot前后端分离Vue去掉url中#刷新页面报404错误
万谷博客
01-09 1337
原文链接：https://blog.wanvale.com/archives/126/ 概述 对前端不是很熟悉，在做SpringBoot+Vue前后端分离项目时，使用vue-router-history去掉url中的“#”后，发现刷新前端或者直接访问url会报404 问题分析 项目的前后端是分别放在不同服务器上的 静态页面使用Nginx部署在服务器A上 SpringBoot项目用jar包方式部署在服务器B上 研究了很久，发现原因在于Vue使用history-mode后，输入URL直接访问或刷新时不会经过ro
nginx代理后刷新后退显示404
m0_56537579的博客
07-29 457
原因是因为web单页面开发模式，只有一个index.html入口，其他路径是前端路由去转的，nginx没有对应这个路径，当然就是404了。 一般nginx监听配置如下 server { listen 80; server_name localhost; location / { root /data/gy/doctorpc; index index.html index.htm; .
web应用程序配置服务端口，采用Nginx作反向代理时，访问网页出现404的问题解决的分析过程和解决方法
weixin_70208651的博客
06-20 3851
人脸识别系统使用8800作服务端口，现要在nginx上设置反向代理，使nginx监听7200端口，并将来自该端口的请求转发至原本由8800端口负责的API服务（即1212和3001端口上的API及其参数），实现了在不改变后端API配置的情况下，通过7200端口进行网页访问的功能，但是出现了404错误。检查与代理和重定向相关的部分，重定向跳转是Nginx服务器提供的一项功能，它允许管理员配置服务器，以便在客户端访问特定URL时，自动将其请求重定向到另一个URL；主要通过Nginx配置文件中的重写指令来实现。
vue-element-admin | 项目部署及nginx反向代理-401/404问题
Kasey_L的博客
03-18 1万+
一、vue-admin-template项目打包 // 具体打包的命令可见package.json npm run build:prod        在项目目录下会生成一个dist文件夹，这个文件夹中内容是我们发布的内容 二、nginx环境部署（Windows环境）     &nbsp...
nginx配置反向代理后报404的原因
qq_31622865的博客
12-12 4539
如题 配置了两个location但是都访问报404 我这里的原因是路径问题，后面的 / 得加上
前端vue，部署到nginx，请求接口404
Lee_SmallNorth的博客
10-19 1万+
最近项目部署到nginx，发现一个请求接口404的问题，于是去请教了大神，终于等到解决，记录一下，避免以后踩坑。。 前端项目配置信息，做的代理 将静态页面部署到nginx下后，页面可以访问，但接口一直404. 解决办法： 页面做的代理，这里要配置请求转发到你的网关或者你的接口的真实路径上去 重启nginx，解决 ...
nginx后端服务器返回给nginx502、504、404、执行超时等错误状态的解决方法
学习之路
02-09 1万+
今天公司的网站访问的时候全部变成404页面，查看网站的文件没有问题，来检查nginx的配置的时候， 发现后端的一台服务器不可用，直接访问那台后台的服务器的时候，返回的是404页面， 因为upstream 里面设置了ip_hash。所以导致我怎么刷新都是404页面。 由此想到了nginx的一个功能，就是当后端的服务器返回给nginx502、504、404、执行超时等错误状态的时候， ngin
vue发布到nginx下请求后台404问题
liulang1905的博客
06-11 2037
先说下我的问题，在vue开始的时候配置了跨域代理，开始时没有问题，但是build 发布到nginx中时访问后台就404了，下面给出我的处理方法 先展示下错误的时候 这里是我登录的时候调用后端接口404没有资源 查看请求地址，发现我在vue里配置的代理地址没有生效，直接将我代理的那个前缀拼了上来，后又拼上了我需要请求的接口 个人分析原因：因为我这里需要跨域请求，在开发时配置了代理，但是在开始是使用的是 npm run 可能用的是node.js发布的就直接生效了 ，现在是用的nginx发布而本事配置的代理
Nginx代理接口访问返回404_nginx 404(1)，带你一起探究Linux运维事件分发机制
m0_60707538的博客
04-06 4880
为了做好运维面试路上的助攻手，特整理了上百道。
若依前后端分离版服务器部署
02-12
### 关于若依前后端分离版服务器部署教程 #### 一、项目概述 若依（RuoYi）是一个基于Spring Boot和Vue.js开发的企业级应用框架，支持快速构建企业级Web应用程序。为了实现高效的运维管理，若依提供了详细的前后端...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值