解决nginx配置页面刷新以后出现404 Not Found和403 Forbidden问题

目录
文章目录隐藏
  1. 1.页面刷新 404 Not Found
  2. 2.页面刷新以后 403 Forbidden
  3. 结语

1.页面刷新 404 Not Found

(1)问题原因

web 单页面开发模式,只有一个 index.html 入口,其他路径是前端路由去跳转的,nginx 没有对应这个路径,所以就会报 404 了。

(2)解决方法

增加try_files $uri $uri/ /index.html配置;意思就是如果第一个存在,直接返回;不存在的话读取第二个 index.html。

location / {
    try_files $uri $uri/ /index.html;
}

2.页面刷新以后 403 Forbidden

页面刷新以后 403 Forbidden 页面刷新以后 403 Forbidden

(1)问题原因

情况 1、vue-router 里面的导航守卫beforeEachafterEach这里面设置了跳转;

情况 2、页面刷新会报错误。

原因:这里的路由跳转相当于从新请求了一下 nginx 代理的路由,但是 nginx 没有所以失败

(2)解决方法(我用的下面代码中的例子 1 解决的)

在 nginx 里面配置路由地址重写(重定向)rewrite

	例 1:访问 www.a.com/a.html------->www.a.com/b.html
	vim /usr/local/nginx/conf/nginx.conf
	
	server {
        listen       80;	#端口
        server_name  www.a.com;		#虚拟主机
        rewrite /a.html 	/b.html;		#www.a.com/a.html		www.a.com/b.html
        location / {
            root   html;		# documentRoot
            index  index.html index.htm;	# 默认是 index.html 页面
        } 
     }
     还需要配置域名 www.a.com,可以通过配置 dns 或者修改/etc/hosts
 
 
	例 2:访问 192.168.4.20------->www.baidu.com
	vim /usr/local/nginx/conf/nginx.conf
	
	server {
        listen       80;	#端口
        server_name  localhost;		#虚拟主机
        rewrite ^/ 	http://www.baidu.com;		#其中^代表正则表达式,^/表示所有路径
        location / {
            root   html;		# documentRoot
            index  index.html index.htm;	# 默认是 index.html 页面
        } 
     }
 
 
	例 3:访问 192.168.4.20/xxxxx------->www.baidu.com/xxxxx
	vim /usr/local/nginx/conf/nginx.conf
	
	server {
        listen       80;	#端口
        server_name  localhost;		#虚拟主机
        rewrite ^/(.*) 	http://www.baidu.com/$1;	#其中^代表正则表达式,^/(.*)表示提取所有路径,然后通过$1 使用匹配到的路径
        location / {
            root   html;		# documentRoot
            index  index.html index.htm;	# 默认是 index.html 页面
        } 
     }
 
	例 4:实现不同的浏览器访问 192.168.4.20/test.html 返回不同的页面
	这里咱们使用 curl 浏览器和 firefox 浏览器。curl 是一款没有图形的浏览器,只可以显示代码信息。

结语

以上就是关于 nginx 配置解决页面刷新以后 404 Not Found 和 403 Forbidden 的解决方法,希望对大家有用。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系maynote@foxmail.com处理
码云笔记 » 解决nginx配置页面刷新以后出现404 Not Found和403 Forbidden问题

发表回复