nginx服务页面刷新报404错误的解决方法

624 阅读1分钟

因为react使用的是虚拟路由,生效要加载app.js,然后通过该文件实现跳转,当页面刷新时无法加载app.js因此导致了404,解决方法如下,加进去 try_files $uri $uri/ /index.html;即可。

原因是: try_files $uri $uri/ /index.html; 以它为例,当用户请求www.xxxx.com/partner时,这里的$uri就是/partner,try_files会先去找$uri也就是/$root/partner,(root是项目的安装目录),然后react打出来的生产环境的包里没有该文件。然后继续往下找,找$uri/,也就是/$root/partner/这个目录,又找不到。再去找/index.html,发起一个内部请求,也就是相当于nginx发起了一个HTTP请求到www.xxxx.com/index.html,这个请求会被 location /{ ... } catch 住,也就是进入 FastCGI 的处理程序。而具体的 URI 及参数是在 REQUEST_URI 中传递给 FastCGI 和 WordPress 程序的,因此不受 URI 变化的影响。

最后发起内部请求解释没有懂,大致理解成会被捕获到重新拼接成index.html,所以就会重新加载app.js,又实现了页面的跳转。