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

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

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

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

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

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

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

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

try_files $uri $uri/ /index.html;

添加的位置应当在这里

在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问题的解决

项目部署到服务器后 ，根路径访问没有问题（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标签

可自行在浏览器上面试下

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

总结

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

赞 (0)

相关推荐

  • NGINX下配置404错误页面的方法分享

    1. 创建自己的404.html页面 2.更改nginx.conf在http定义区域加入: fastcgi_intercept_errors on; 3.更改nginx.conf(或单独网站配置文件,例如在nginx -> sites-enabled下的站点配置文件 ) 中在server 区域加入: error_page 404 = /404.html 或者 error_page 404 = http://www.xxx.com/404.html 4.更改后重启nginx,,测试nginx.co

  • 为Nginx自定义404，502错误页面的方法

    首先打开nginx.conf文件,在fastcgi_temp_file_write_size 128k; 下面添加 fastcgi_intercept_errors on;注意,包括;号 然后在需要定义的站点的里面添加 error_page 404 = /404.htm;例如: 复制代码 代码如下: server { listen 80; server_name www.deepvps.com; index index.html index.htm index.php; error_page 4

  • NGINX服务器配置404错误页面转向的方法

    什么是404页面 如果碰巧网站出了问题,或者用户试图访问一个并不存在的页面时,此时服务器会返回代码为404的错误信息,此时对应页面就是404页面.404页面的默认内容和具体的服务器有关.如果后台用的是NGINX服务器,那么404页面的内容则为:404 Not Found 为什么要自定义404页面 在访问时遇到上面这样的404错误页面,我想99%(未经调查,估计数据)的用户会把页面关掉,用户就这样悄悄的流失了.如果此时能有一个漂亮的页面能够引导用户去他想去的地方必然可以留住用户.因此,每一个网站都

  • Nginx实现404页面的几种方法(三种)

    一个网站项目,肯定是避免不了404页面的,通常使用Nginx作为Web服务器时,有以下集中配置方式,一起来看看. 第一种:Nginx自己的错误页面 Nginx访问一个静态的html 页面,当这个页面没有的时候,Nginx抛出404,那么如何返回给客户端404呢? 看下面的配置,这种情况下不需要修改任何参数,就能实现这个功能. server { listen 80; server_name www.test.com; root /var/www/test; index index.html ind

  • nginx刷新页面出现404解决方案(亲测有效)

    目录 方法一 方法二 方法一 最为简单的,将router设置为hash模式!!!history模式的路由需要后端配置,hash模式便不需要,不同的框架所需不一样,看对应的文档. 方法二 找到nginx配置代码,进行修改,网上很多都是如下类型的代码 location ^~ /api { proxy_connect_timeout 600; proxy_read_timeout 600; proxy_set_header x-real-ip $remote_addr; proxy_set_heade

  • Nginx实现404页面的方法小结

    第一种:Nginx自己的错误页面 Nginx访问一个静态的html 页面,当这个页面没有的时候,Nginx抛出404,那么如何返回给客户端404呢? 看下面的配置,这种情况下不需要修改任何参数,就能实现这个功能. server { listen 80; server_name www.test.com; root /var/www/test; index index.html index.htm; location / { } # 定义错误页面码,如果出现相应的错误页面码,转发到那里. erro

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

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

    近日在部署项目时,出现了一些问题,如图 正常的登录界面是可以访问的,但是在登录之后访问之后的地址会报404错误,于是去查看是否配置有错误,但是查看之后发现,nginx.conf与config.js两个配置文件的ip和端口都是没有错误的 这个项目部署过好多次,没有出现过这样的错误. 这是原版没动过的解压缩后的nginx.conf的源文件 圈起来的地方是应该按照项目配置对应的ip和监听的端口 listen对应的是端口,server_name对应的是访问的ip 但是这样是不能解决问题,我们需要添加如下

  • 关于访问后端接口报404错误问题的解决方法(全网最细!)

    目录 前言 第一点 后端接口能否访问 情况一:server.servlet.context-path(项目访问路径)漏写或者名称写错 情况二:类上面的@RequestMapping(“/demo”)注解里面的值漏写或者名称写错 情况三:方法上面的@RequestMapping(“/demo”)注解里面的值漏写或者名称写错 情况四:路径多写了一部分内容 第二点 后端接口的返回值是否能够映射到前端页面 总结 前言 当我们通过前端向后端发起一个请求调用后端接口时,经常会遇到404的问题.网上关于对40

  • Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法

    今天查看网站的源代码,发现有个glyphicons-halflings-regular.woff文件没有找到,因为我的网站使用了bootstrap的Glyphicons 字体图标,因此需要加载Glyphicons Halflings的相关文件,但是我的文件中明明有这个文件那怎么会报404错误呢? 查看了下博客上查到了解决方案 跟大家分享一下 在web.config 中添加如下代码段 <system.webServer> <staticContent> <remove file

  • ubuntu16.04下安装openssh-server报依赖错误的完美解决方法(非常不错)

    问题:系统重装后,安装和配置SSH,防火墙配置 #安装install openssh-server sudo apt install openssh-server -y 遇到问题: sudo apt install openssh-server -y 正在读取软件包列表... 完成 正在分析软件包的依赖关系树 正在读取状态信息... 完成 有一些软件包无法被安装.如果您用的是 unstable 发行版,这也许是 因为系统无法达到您要求的状态造成的.该版本中可能会有一些您需要的软件 包尚未被创建或

  • vue中配置mint-ui报css错误问题的解决方法

    vue中配置mint-ui报css错误问题的解决方法

    在vue2.0中引入了mint-ui后总是报一个css的错误 但是package.json中已经配置了css-loader style-loader ,webpack.config中也已经配置了css,还是报这个错误,相反,如果把webpack.config中css的配置注释掉就不会出错,这是为什么呢? 因为 在webpack.config中没有设置好css引入的目录,因为默认情况下我们只会引入/src/目录下的css, 但是mint-ui是要冲node_modules目录去引入的,所以在web

  • SQLyog连接MySQL8.0报2058错误的完美解决方法

    引言 用SQLyog连接MySQL8.0(社区版:mysql-installer-community-8.0.15.0.msi),出现错误2058(Plugin caching_sha2_password could not be loaded:xxxx),通过查询资料了解了该错误的原因并在本文中提出了该问题的方案. 原因 该错误提示如下图所示: 具体原因:新的MySQL 8.0安装,在初始化数据目录时,将 'root'@'localhost'创建帐户,并且该帐户caching_sha2_pas

  • Python中ImportError错误的详细解决方法

    Python中ImportError错误的详细解决方法

    目录 ImportError: No module named XXX 错误解决 问题 解决 补充:ImportError: libGL.so.1: cannot open shared object file: No such file or directory 报错信息 报错分析 解决方案 总结 ImportError: No module named XXX 错误解决 问题 错误:ImportError: No module named XXX 在Python的工程中,偶尔会遇到文件无法引

  • springboot项目启动,但是访问报404错误的问题

    springboot项目启动,但是访问报404错误的问题

    目录 springboot项目启动,访问报404错误 我的解决 springboot版本引起的404 环境描述 报错情况如下 springboot项目启动,访问报404错误 今天在做一个springboot项目的时候,是接着别人的项目写的,写完之后想做一下测试,于是就启动了springboot,然后在访问的时候,一直包404的错误,然后百度了一下网上给的方法,包括注解使用@RestController,然后去除掉方法@RequestMapping(value = "/add")中的&q

  • IIS 服务器下载apk文件报404错误的解决方法

    最近在使用IIS作为服务器的时候,apk文件已经上传到服务器上去了,但是无法下载,报404错误(没有找到),截图如下: 解决方案: 在iis管理器中增加MIME类型,如下图所示: 增加如图所示内容: 文件扩展名是:.apk,MIME类型是:application/octet-stream 也可以这样增加:文件扩展名:.apk MIME类型:application/vnd.android.package-archive 最后测试,问题解决.

随机推荐