Nginx解决单页应用刷新报错404的问题

一、问题

1.1 问题概述

将React应用打包后，部署到服务器上，在非首页的地方使用浏览器自带的刷新功能，页面刷新失败，显示404；

如果你的问题和我类似，可以往下看~

1.2 问题详细描述

在项目开发完成后，将应用通过 npm run build 打包，之后将该包部署到服务器上并通过Nginx将地址指向了服务器的包路径，Nginx的配置如下：

server {
	listen 443 ssl;
	server_name xxxxx.xxxxxxx.com;
	# access_log  /var/log/nginx/access.log  main;
	# error_log  /var/log/nginx/error.log;

	ssl_certificate      /etc/nginx/cert/xxxxx.xxxxxx.xxx.pem;  #填写解压的pem文件
	ssl_certificate_key  /etc/nginx/cert/xxxxx.xxxxxx.xxx.key;  #填写解压的key文件

	# ssl on;
	ssl_session_cache    shared:SSL:10m;
	ssl_session_timeout  50m;

	ssl_ciphers  HIGH:!aNULL:!MD5;
	ssl_prefer_server_ciphers  on;

	location / {
		root /usr/share/nginx/html;
	}
}

此时，打开域名网页可正常浏览，也可以正常登录，但在登录后的页面使用浏览器的刷新功能，网页会报404，显示缺少资源；

二、解决

2.1 修改Nginx配置

将Nginx的配置改成如下：

server {
	listen 443 ssl;
	server_name xxxxx.xxxxxxx.com;
	# access_log  /var/log/nginx/access.log  main;
	# error_log  /var/log/nginx/error.log;

	ssl_certificate      /etc/nginx/cert/xxxxx.xxxxxx.xxx.pem;  #填写解压的pem文件
	ssl_certificate_key  /etc/nginx/cert/xxxxx.xxxxxx.xxx.key;  #填写解压的key文件

	# ssl on;
	ssl_session_cache    shared:SSL:10m;
	ssl_session_timeout  50m;

	ssl_ciphers  HIGH:!aNULL:!MD5;
	ssl_prefer_server_ciphers  on;

	location / {
        try_files $uri $uri/ /index.html;
		root /usr/share/nginx/html;
	}
}

和之前相比，加了这一行

try_files $uri $uri/ /index.html;

使用了try_files指令，意思是检查url是否存在，如果不存在则一直往后找，这里就相当于，先检查了$uri是否存在，如果不存在再检查$uri/是否存在，如果都不存在则定向到/index.html上；

2.2 造成的原因

造成404的根本原因是在服务器上找不到该路由地址，我们知道浏览器上的地址和服务器上的文件是一一对应的，换句话说，在浏览器上我们输入了xxx.com/a，那么当访问传到nginx里的时候，nginx就会去找这个/a对应的是什么，如果是静态文件，那么就将这个静态文件发送到浏览器，并显示在界面上

但我们知道，React和Vue之类的都是单页应用，整个站点上所有的内容都是集中在index.html里的，路由也是纯前端路由，浏览器地址发生改变时并不需要服务器去做相对应的操作，换句话说，也就是路由和服务端无关，并且nginx上也没有对应静态文件，因此访问不存在的路由服务器自然就会反馈前端404找不到资源。