解决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

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