express动态路由未能匹配造成的404问题

柔光的暖阳◎ 2023-10-16 07:27 2阅读 0赞

一个react项目打包以后，使用express跑起来，访问首页是可以的，但是只要访问产品详情页，就会白屏，浏览器开发者模式一看：原来是404错误：

![8c63940e76b2482487b13cd1118a6414.png][]

看了一下代码和日志，应该是路由没有被匹配上，因为日志根本没有打印该路由信息：

![77e5f2335ce54d0ca6217005bae1cf54.png][]

为什么没有匹配上呢？ 对比一下程序里的规则和实际的访问请求路径：

程序定义的路由匹配规则： app.get("/api/:path",xxx)

实际的访问请求路径： /api/touristRoutes/fb6d4f10-79ed-4aff-a915-4ce29dc9c7e1

从这里可以看到：

程序定义的路由匹配规则**是两层路由**

而实际的访问请求路径**是三层路由，第三层路由**/**fb6d4f10-79ed-4aff-a915-4ce29dc9c7e1实际是作为查询参数的**，如以下代码所示：

![c5209a7e17dd49bba349686679d2bfcf.png][]

**也就是说两个的路由层级是不一致的！那么必然会出现程序中express无法识别实际访问路径，从而报404错误。**

这种情况使用http-proxy-middleware中间件比较好。

如果使用express动态路由，就得重新再定义一条/api/touristRoutes/$\{touristRouteId\}的路由规则：

> app.get("/api/touristRoutes/\[A-Za-z0-9-\]+", (req, res) => \{
> 
> let url = "http://82.157.43.234:8080";
> 
> url = url + req.path;
> 
> console.log("url is ", url);
> 
> axios
> 
> .get(url, \{ params: req.query \})
> 
> .then((response) => \{
> 
> res.json(response.data);
> 
> \})
> 
> .catch((e) => \{
> 
> console.log(e);
> 
> \});
> 
> \});

**总结：express的动态路由定义：如果实际访问路径的路由层级跟express定义路由层级不一致，就会报404！**

[8c63940e76b2482487b13cd1118a6414.png]: https://img-blog.csdnimg.cn/8c63940e76b2482487b13cd1118a6414.png
[77e5f2335ce54d0ca6217005bae1cf54.png]: https://img-blog.csdnimg.cn/77e5f2335ce54d0ca6217005bae1cf54.png
[c5209a7e17dd49bba349686679d2bfcf.png]: https://img-blog.csdnimg.cn/c5209a7e17dd49bba349686679d2bfcf.png