历史搜索

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

游客2024-09-21 09:30:01
目录文章目录
  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

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

(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 的解决方法,希望对大家有用。

标签:nginx