记录一次与nginx大战近4天的问题

前言

关于nginx把我拿捏

准备把招新系统合并到学校服务器上已有的项目上里，于是先在测试端口进行测试，发现老旧项目占用了nginx的主路由，于是我只能想办法让招新系统在nginx上开二级路由并配合前端BrowserRouter路由。接下来就是厮杀时刻…

出现的问题：首次进入 https://XXXX.cn/enroll的时候没有问题（因为我已经在nginx配置了一个关于enroll的路由，该路由具体细节往下看）但是一旦前端路由跳转的时候或者刷新浏览器网页的时候，页面直接404完犊子
老项目占用的配置如下：

就是说我现在不能改变默认location的配置，还有nginx上/static/的匹配配置

一、为什么点击前端路由跳转返回404？

nginx的路由如下:
build文件即为react打包后的文件

打开开发者网络选项卡，发现html的请求的路径为https://xxxx.cn/enroll/home 首先先分析哪个location会拦截到这个请求，这个毫无疑问，肯定是location为/enroll会拦截到，然后再去build目录下找home文件夹，结果发现找不到，因此报错404，关于css与js都是请求不到的，因为/static/被老项目占用了，请求路径不对导致找不到对应资源了。

二、为什么一刷新页面就无了

这个问题其实和上面那个问题是一样的，因为一刷新，请求的路径会变成类似https://xxxx.cn/enroll/xxx,而这种请求会被nginx的/enroll拦截，同理，后面的发生的事情就和上面一样了。

三、解决方案

错误示例1：既然请求路径不对，那么我可以在location为/enroll的代码块中用rewrite重新对路径进行改写，然后让请求路径对于/enroll后面的所有参数都忽略掉，这样请求就都变成了https://xxxx.cn/enroll 这样显然是不对的，因为这会导致一种循环匹配，也不知道为啥当时想到了这种方式，可能是太专注于解决路径问题了，脑子抽了。
错误示例2：既然改写路径然后重新匹配会有循环的问题，那么我又想到可以把/enroll后面的参数收集起来然后拼接成正确的路径，做法如下：

其中$enroll为上面我set的一个常量即build的那个文件目录（/home/kelab/oj_recruiment/build）
结果发现一个问题，html文件200了，css和js直接g了，这也不难想到为啥g了，对，还是那个路径问题，css和js请求的路径类似https://xxxx.cn/static/xxx.css 看到这里会发现enroll怎么不见了？这是因为前端页面配置里面默认是以根路径，所有才会从域名后直接拼接/static来发起请求，到了这里这个问题的正解已经不远了，终于拨开云雾见月明了。
正确示例:

说明: 第一个location的目的在于将所有静态css,js资源请求的路径设置正确，第二个location的目的在于将所有以/enroll开头的请求路径重写（相当于去除掉/enroll后面的所有参数），不过这种写法需要前端配合，在package.json中加上homepage:"/enroll/",目的在于页面请求的静态资源都会带上/enroll,
例如请求css的路径会变成:https://xxxx.cn/enroll/static/xxx.css，

这个写法还可以优化，因为完全可以直接用第一个location的手法将enroll后面的路径匹配上，然后再正确的改写路径。

tips:对于nginx里面例如location的匹配规则和try_files,alias不太了解的小伙伴可以去先看看相关的基础解释，包括react-router的homepage有什么作用，例如:
nginx中文文档
https://blog.csdn.net/RedaTao/article/details/109095165,
https://blog.csdn.net/a20023930/article/details/80436663

总结

关于我这种情况是需要前端和nginx都相互配合一下才能完成，前端的react需要在package.json中设置homepage来改变请求静态资源的路径，nginx上需要配置/enroll的location来对请求进行改写请求路径。我相信还有更好的解决办法。

nginx与react配合二级路由相关推荐

react配置二级路由
比如mine组件 login组件 reg组件 mine组件路由的配置在router中的index里面 import mine from "../views/mine"{id: ...
react使用二级（多级）路由（rout）实现局部跳转
这种用法其实在实际开发中,很多地方都要用到.但是在百度以后却发现没有相关的帖子.{黑人问号?} 对于很多新入坑react的小伙伴来说,可能遇到过需要用route的地方就是在页面跳转的时候.但是随着进一 ...
React二级路由的实现
首先考虑二级路由在哪里展示,他们的展示在对应的一级路由的组件内,所以先找到一级路由对应的pages页以登录和注册为例,在我们的里面实现二级路由(登录注册) 二级路由的展示有俩种形式: ①:通过一个开 ...
react二级路由的两种方法
** react 二级路由配置 ** 1.使用react - router - config包 ①创建一个config.js文件默认导出路由数组 import Home from '../views/ ...
react二级路由配置正确不显示页面的问题解决
react二级路由配置正确不显示页面的问题解决最近在写react项目,配置二级路由时出了一个小小的bug,虽然是一个小小的bug,但是也苦思大半天不得其解.直到第二天豁然开朗,才发觉就这?? 问题描 ...
react路由系列02___ 二级路由
一.经过文章"react路由系列01___ 在react脚手架里使用React-router(简单入门)"的学习,进入二级路由的学习二.二级路由: 1.在react路由系列01_ ...
react 中子路由（route）或二级路由如何配置？
比如有A框架,\B\C\D(如下图)三个模块,如下图,整体页面我们叫A,A左侧菜单有个菜单是跳到B(除了左侧蓝色的导航之外整个右边我们叫B).而B目录下又有C或者D(就是右边第三个模块)内容区,如何来 ...
React中的路由react-router
Router 的基本使用! 我们需要npm 下载react-router: npm install react-router --save BrowserRouter或HashRouter Route ...
react 按照一级路由分包加载
按需加载一开始整个项目只有一个bundle.js,压缩之后达到了4M.导致首屏加载速度很慢,需要优化. 方案优化包大小,从业务角度出发,抽离重复的业务组件,避免大规模的90%相似度代码.需要对业务 ...

nginx与react配合二级路由

记录一次与nginx大战近4天的问题

前言

一、为什么点击前端路由跳转返回404？

二、为什么一刷新页面就无了

三、解决方案

总结

nginx与react配合二级路由相关推荐

最新文章

热门文章