Nginx报404错误的详细解决方法


Posted in Servers onJuly 23, 2022

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

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

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

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

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(刷新),才导致这个问题。

总结

到此这篇关于Nginx报404错误的简单解决方法的文章就介绍到这了,更多相关Nginx报错404内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!


Tags in this post...

Servers 相关文章推荐
JVM上高性能数据格式库包Apache Arrow入门和架构详解(Gkatziouras)
May 26 Servers
解析在浏览器地址栏输入一个URL后发生了什么
Jun 21 Servers
nginx请求限制配置方法
Jul 09 Servers
nginx配置虚拟主机的详细步骤
Jul 21 Servers
Nginx虚拟主机的搭建的实现步骤
Jan 18 Servers
Z-Order加速Hudi大规模数据集方案分析
Mar 31 Servers
Consul在linux环境的集群部署
Apr 08 Servers
Tomcat starup.bat 脚本实现开机自启动
Apr 20 Servers
Vscode中SSH插件如何远程连接Linux
May 02 Servers
鲲鹏 CentOS 7 安装Python3.7
May 11 Servers
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
Jun 25 Servers
Apache SkyWalking 监控 MySQL Server 实战解析
Sep 23 Servers
彻底卸载VMware虚拟机的超详细步骤记录
Jul 15 #Servers
windows server2016安装oracle 11g的图文教程
Jul 15 #Servers
Windows Server 2012 R2服务器安装与配置的完整步骤
Jul 15 #Servers
Windows server 2003卸载和安装IIS的图文教程
Jul 15 #Servers
本地搭建minio文件服务器(使用bat脚本启动)的方法
Jul 15 #Servers
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
Jul 15 #Servers
Apache Kafka 分区重分配的实现原理解析
You might like
学习discuz php 引入文件的方法DISCUZ_ROOT
2009/06/21 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
PHP的重载使用魔术方法代码实例详解
2021/02/26 PHP
javascript中利用数组实现的循环队列代码
2010/01/24 Javascript
Extjs 3.3切换tab隐藏相应工具栏出现空白解决
2013/04/02 Javascript
jQuery固定浮动侧边栏实现思路及代码
2014/09/28 Javascript
JavaScript结合AJAX_stream实现流式显示
2015/01/08 Javascript
js实现简洁的滑动门菜单(选项卡)效果代码
2015/09/04 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
微信小程序 video组件详解
2016/10/25 Javascript
Bootstrap3 图片(响应式图片&图片形状)
2017/01/04 Javascript
Vue.js 2.0 移动端拍照压缩图片上传预览功能
2017/03/06 Javascript
js获取元素的偏移量offset简单方法(必看)
2017/07/05 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
小程序中的箭头函数的具体使用
2020/06/19 Javascript
完美解决通过IP地址访问VUE项目的问题
2020/07/18 Javascript
实例讲解Python设计模式编程之工厂方法模式的使用
2016/03/02 Python
使用Python的Flask框架来搭建第一个Web应用程序
2016/06/04 Python
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
Python编程实战之Oracle数据库操作示例
2017/06/21 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
Python向excel中写入数据的方法
2019/05/05 Python
keras中的loss、optimizer、metrics用法
2020/06/15 Python
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
航空大学应届生求职信
2013/11/10 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
反四风个人对照检查材料
2014/09/26 职场文书
个人租房协议书
2014/11/28 职场文书
搞笑婚前保证书
2015/02/28 职场文书
2015年结对帮扶工作总结
2015/05/04 职场文书
2015年酒店年度工作总结
2015/05/23 职场文书
pandas提升计算效率的一些方法汇总
2021/05/30 Python