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

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

（1）问题原因

情况 1、vue-router 里面的导航守卫beforeEach和afterEach这里面设置了跳转；

情况 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配置页面刷新以后出现404 Not Found和403 Forbidden问题的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。