当前位置:首页 > 技术文章 > 正文内容

Nginx报404错误的详细解决方法(nginx报错413)

arlanguage3个月前 (01-26)技术文章29

最近打开网站看看结果提示:nginx 404 not found,所以这篇文章主要给大家介绍了关于Nginx报404错误的简单解决方法,文中通过图文介绍的非常详细,需要的朋友可以参考下

宝塔服务器面板,一键全能部署及管理,送你10850元礼包,点我领取

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

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

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

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

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

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

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

添加的位置应当在这里

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

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

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

停止nginx服务命令:

启动nginx服务命令:

热部署nignx服务命令:

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

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

可以直接在浏览器窗口按

Ctrl+Shift+Del

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

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

第一次写经验分享贴,如有不足之处,请大家提出

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

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

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

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

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标签

可自行在浏览器上面试下

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

总结

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

扫描二维码推送至手机访问。

版权声明:本文由AR编程网发布,如需转载请注明出处。

本文链接:http://www.arlanguage.com/post/1116.html

标签: nginx php 404
分享给朋友:

“Nginx报404错误的详细解决方法(nginx报错413)” 的相关文章

NGINX配置跨域CORS支持 nginx配置跨域请求

NGINX配置跨域CORS支持这两天在搞酷瓜云网课的 app,采用 uni-app 做全端支持,现学现卖,目前算是入门了。在做 H5 的时候难免会跨域请求后端 API,虽然用 HBuilder 内置的浏览器不会有跨域问题(这个应该是做了内部处理),但是那个内置浏览器真尼妈坑爹,过一会就会卡死,导致...

Windows下配置Nginx开机自启动

如何安装、配置网站就不说了,文章主要讲讲windows中如何让nginx开机自启动1.windows中配置nginx开机启动需要借助Windows Service Wrapper工具。可以通过地址http://repo.jenkins-ci.org/releases/com/sun/winsw/wi...

Nginx 最全操作——nginx配置(2)

nginx 配置基本结构main # 全局配置,对全局生效 ├── events # 配置影响 nginx 服务器或与用户的网络连接 ├── http # 配置代理,缓存,日志定义等绝大多数功能和第三方模块的配置 │ ├── upstream # 配置后端服务器具体地址,负...

域名备案流程总结

域名备案流程一、前言一般某个网站程序部署到云服务器上后,我们就可以直接通过”服务器主机IP:应用端口”的方式来访问该网站服务了,但这种方式非常不友好。对于广大用户而言,没几个人会记得住那一串IP数字地址。因此我们需要提供一个友好的名称来作为服务器主机IP的别名,让用户在浏览器输入别名就可以访问到网站...

nginx实现TCP转发

需要在服务器上实现个TCP服务器, 由于已安装了nginx, 所以在nginx中给TCP开个口子。(当然, 在nginx中转发TCP端口 并不是必要操作, 只要程序上实现了TCP server, nginx中搞不搞都可以. 用nginx是为了后续方便管理.)stream模块网上文章的说法都是, 1....

SpringBoot+Vue3+Element Plus 打造分布式存储系统(完结)

获课:itazs.fun/2199/Spring Boot + Vue 3 + Element Plus 打造分布式存储系统分布式存储系统在现代企业级应用中扮演着重要角色,尤其是在处理大规模数据和高并发访问的场景下。本文将详细介绍如何使用 Spring Boot、Vue 3 和 Element Pl...