0

0

Nginx报404错误如何解决

PHPz

PHPz

发布时间:2023-05-17 18:23:18

|

184121人浏览过

|

来源于亿速云

转载

近日在部署项目时,出现了一些问题,如图

Nginx报404错误如何解决

正常的登录界面是可以访问的,但是在登录之后访问之后的地址会报404错误,于是去查看是否配置有错误,但是查看之后发现,nginx.confconfig.js两个配置文件的ip和端口都是没有错误的

这个项目部署过好多次,没有出现过这样的错误。

这是原版没动过的解压缩后的nginx.conf的源文件

Nginx报404错误如何解决

圈起来的地方是应该按照项目配置对应的ip和监听的端口

listen对应的是端口,server_name对应的是访问的ip

但是这样是不能解决问题,我们需要添加如下的一句话

try_files $uri $uri/ /index.html;

添加的位置应当在这里

Nginx报404错误如何解决

server下的location段里添加,此时再重新启动nginx就可以了

nginx.exe所在的目录内,点击地址栏,输入cmd,可直接在该目录下启动命令行,无需打开cmd后再跳转目录。

若之前没有关闭nginx服务,先停止再打开,如果已关闭,可以直接输入启动服务的命令

停止nginx服务命令:

nginx -s stop

 启动nginx服务命令:

start nginx

热部署nignx服务命令:

(但是不推荐使用这个命令,这个命令有时候是不起作用的,不如直接停了再启动)

nginx -s reload

重新启动nginx后,浏览器最好是清除缓存后再进行测试

可以直接在浏览器窗口按

Ctrl+Shift+Del

可直接打开清除缓存的对话框

重新测试,可以正常访问了

英特尔AI工具
英特尔AI工具

英特尔AI与机器学习解决方案

下载

Nginx报404错误如何解决

补充:Nginx部署之后正常点击没问题,刷新页面会出现404问题的解决

项目部署到服务器后 ,根路径访问没有问题(http:10.10.10.10),但是进入其他功能再刷新页面就会出现404,比如

http:10.10.10.10/test/test/test 刷新页面就会出现404,因为你没在nginx配置上面加上重定向跳转。

解决办法,只需要加上这段配置:

try_files $uri $uri/ /index.html;

server {
    listen 80;
    server_name 127.0.0.1;
	
	location / {
		root /data/htdocs/FactoryModel/micro-front-end/industrial-internet-platform-main-vue;
		index index.php index.html index.htm;
		# add_header Cache-Control;
		add_header Access-Control-Allow-Origin *;
		if ( $request_uri ~* ^.+.(js|css|jpg|png|gif|tif|dpg|jpeg|eot|svg|ttf|woff|json|mp4|rmvb|rm|wmv|avi|3gp)$ ){
		  add_header Cache-Control max-age=7776000;
		  add_header Access-Control-Allow-Origin *;
		}
		try_files $uri $uri/ /index.html;
	}
}

这句配置的意思是每次匹配url路径时候找不到对应静态资源时候调制跳转到index.html文件

如图加在这里即可

下面内容需要稍微知道router路由工作原理、nginx原理

解析为什么会这样(针对路由在history模式下):

先提出问题:

1、为什么刷新页面会(没有配置情况下且不在首页根目录刷新)
2、为什么点击跳转时候会(有时)

现在来解决问题:

1、假设现在在浏览器上的url为 172.1.2.3:7000/test ,此时刷新页面时候会去根据浏览器上的url去服务器(nginx)上面请求对应的静态资源,nginx根据location / 的匹配规则在dist文件夹里没有找到对应的静态文件"test",所以返回404,合理。

此时通过配置try_files来重定向返回index.html文件,也就是回去首页“ / ”,注意,此时你的页面已经刷新过了,此时react-router或者vue-router路由发挥作用,会根据当前的url地址来对应匹配上组件,所以此时url即对应组件,页面重新加载完成,完事。

2、第二个问题,为什么点击跳转时候会而有时候不会,要知道跳转有两种情况:一种页面刷新(属于第一个问题),一种页面不刷新。这取决于你代码的书写情况,请记住:

1、push不会刷新页面,只会更改浏览器上的url路由变更,不管是react-router还是vue-router都是运用html的api实现,叫做pushState()
2、通过 会刷新页面,它相当于a标签

可自行在浏览器上面试下

Nginx报404错误如何解决

所以当你点击跳转时候,有时候你代码用的是push(不刷新)、有时候用的是a标签、Link(刷新),才导致这个问题。

相关文章

错误代码修复工具(综合错误类型修复工具)
错误代码修复工具(综合错误类型修复工具)

综合错误类型修复工具是一款跨平台全能修复工具,主要解决各种错误代码因为运行时错误,未指定错误,应用程序错误等导致的系统奔溃,软件无法运行、安装、启动和使用等问题。有需要的小伙伴快来下载使用吧!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
php源码安装教程大全
php源码安装教程大全

本专题整合了php源码安装教程,阅读专题下面的文章了解更多详细内容。

65

2025.12.31

php网站源码教程大全
php网站源码教程大全

本专题整合了php网站源码相关教程,阅读专题下面的文章了解更多详细内容。

43

2025.12.31

视频文件格式
视频文件格式

本专题整合了视频文件格式相关内容,阅读专题下面的文章了解更多详细内容。

35

2025.12.31

不受国内限制的浏览器大全
不受国内限制的浏览器大全

想找真正自由、无限制的上网体验?本合集精选2025年最开放、隐私强、访问无阻的浏览器App,涵盖Tor、Brave、Via、X浏览器、Mullvad等高自由度工具。支持自定义搜索引擎、广告拦截、隐身模式及全球网站无障碍访问,部分更具备防追踪、去谷歌化、双内核切换等高级功能。无论日常浏览、隐私保护还是突破地域限制,总有一款适合你!

41

2025.12.31

出现404解决方法大全
出现404解决方法大全

本专题整合了404错误解决方法大全,阅读专题下面的文章了解更多详细内容。

204

2025.12.31

html5怎么播放视频
html5怎么播放视频

想让网页流畅播放视频?本合集详解HTML5视频播放核心方法!涵盖<video>标签基础用法、多格式兼容(MP4/WebM/OGV)、自定义播放控件、响应式适配及常见浏览器兼容问题解决方案。无需插件,纯前端实现高清视频嵌入,助你快速打造现代化网页视频体验。

9

2025.12.31

关闭win10系统自动更新教程大全
关闭win10系统自动更新教程大全

本专题整合了关闭win10系统自动更新教程大全,阅读专题下面的文章了解更多详细内容。

8

2025.12.31

阻止电脑自动安装软件教程
阻止电脑自动安装软件教程

本专题整合了阻止电脑自动安装软件教程,阅读专题下面的文章了解更多详细教程。

3

2025.12.31

html5怎么使用
html5怎么使用

想快速上手HTML5开发?本合集为你整理最实用的HTML5使用指南!涵盖HTML5基础语法、主流框架(如Bootstrap、Vue、React)集成方法,以及无需安装、直接在线编辑运行的平台推荐(如CodePen、JSFiddle)。无论你是新手还是进阶开发者,都能轻松掌握HTML5网页制作、响应式布局与交互功能开发,零配置开启高效前端编程之旅!

2

2025.12.31

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
进程与SOCKET
进程与SOCKET

共6课时 | 0.3万人学习

nginx浅谈
nginx浅谈

共15课时 | 0.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号