Nginx部署代理访问网站正常,进入页面后刷新出现404问题

引言

今天遇到一个奇葩问题,就是我们nginx代理访问我们的官网,但是当我们在进入一个页面后,再次刷新请求的时候报错404。

比如: http://192.168.1.4/ 访问官网正常,当http://192.168.1.4/index.html 的时候,则会报错404。这是什么原因呢?

起始很简单就是你的nginx配置上没有添加重定向跳转。

解决问题

解决的方式很简单,就是在我们的代理映射处,配置下面这段代码即可成功搞定,不再出现404!

try_files uriuri uriuri/ /index.html;

然后,重启nginx服务即可正常的刷新访问了!

如下图所示:

那么这句话是什么意思呢?

其实很简单,

try_files 表示的是检查文件是否存在,就是指的在每次匹配URL路径的时候,找不到对应的静态资源的时候自动跳转到index.html文件。

还有另外一种404的错误,那就是nginx访问的文件权限问题。

比如,你访问的路径,他要的权限是root权限,而我们启动nginx的权限是普通用户权限,则会因为权限不错,导致无法正常访问。

为什么会出现这样的问题

问题解决了,我们还要知道为什么会出现这个问题。

为什么刷新页面会出现这种情况(没有配置情况下,而且不是首页根目录刷新)

如:http://192.168.1.4/index.html ,此时刷新页面的时候回去根据浏览器的url, 访问nginx上请求对应的静态资源,而nginx会根据localhost / 的匹配规则在dist文件夹里面没有找到对应的静态文件index,所以就会报错404,当然是合理的

好了,今天关于nginx配置后进入页面刷新404问题就讲解到这,欢迎大家留言交流。

也欢迎大家关注我的公众号《coder练习生》。

当你将Vite项目部署Nginx服务器并遇到页面刷新404错误时,这通常是因为Nginx配置未正确设置动态内容路径或者是Vite的静态文件URL处理不当。以下是可能的原因和解决步骤: 1. **Vue单页应用配置**: - Vite默认生成的是静态站点,所以你需要告诉Nginx如何解析动态请求。检查你的`nginx.conf`中的`try_files`指令,应该指向你的Vite构建后的目录,例如: ```bash location / { try_files $uri $uri/ /index.html =404; } ``` 2. **Vite devServer的部署模式**: - 如果你使用了Vite的`--preview`或`--host`选项部署到本地,需要确保Nginx正确转发请求。确保Vite devServer的`host`设置与Nginx监听的地址致。 3. **Nginx代理配置**: - 如果你的应用运行在非根路径(如"/app"),你需要添加反向代理规则。例如: ```nginx server { listen 80; location /app { proxy_pass http://localhost:3000; # Vite devServer端口 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; } } ``` 4. **检查URL重写规则**: - 检查是否有不必要的URL重写,确保浏览器访问的URL可以直接匹配到Vite项目的资源。 5. **清除缓存**: - 清除浏览器缓存,并尝试通过控制台的开发者工具查看网络请求是否正确。 如果以上步骤都确认无误,还是存在问题,试着提供更多的上下文信息以便更精确地定位问题
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

ybb_ymm

你的鼓励会是对我最大的支持

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值