如何解决Express路由传递含斜杠文件路径参数的404问题

核心问题原因 #

Express默认的路由参数/:folder只能匹配单个URL段（也就是到下一个/就截止），所以当你的文件夹路径是folder/subfolder这种带斜杠的格式时，路由会把folder当成folder参数，剩下的/subfolder会被当成新的路由部分，自然找不到对应的/getAll/:folder路由，返回404。

具体解决方案 #

1. 修改Express路由规则 #

把原来的路由改成支持匹配带斜杠的路径，两种方式可选：

方式一：使用通配符*

const router = require('express').Router();
// 用:folder*来匹配后续所有路径（包括斜杠）
router.get('/getAll/:folder*', handleGetImages); // 注意函数名要和控制器一致，你之前路由写的handleGetAll和控制器的handleGetImages不匹配，必须统一

此时在控制器里，req.params.folder会拿到完整的带斜杠的路径（比如folder/subfolder）。

方式二：使用正则表达式匹配

const router = require('express').Router();
// 用正则/(.*)匹配/getAll/后面的所有内容
router.get('/getAll/(.*)', handleGetImages);

这种情况下，req.params[0]就是完整的文件夹路径，和你原来控制器里的写法一致。

2. 前端编码修正 #

虽然Express会自动解码URL，但前端必须先对带斜杠的路径进行编码，避免传输时被拆分。修改SWR的请求路径拼接：

// 用encodeURIComponent编码folder路径
const {data, error, isLoading} = useSWR(['/images/getAll/'+encodeURIComponent(folder), token], getImages );

3. 修正控制器里的函数名不匹配问题 #

你路由里写的是handleGetAll，但控制器的函数是handleGetImages，这会导致路由找不到处理函数，必须改成一致的名称。

额外注意点 #

控制器里的用户ID比较：image.user.toHexString() === user，如果req.user是完整的用户对象，应该取user._id.toHexString()来和image.user对比，否则可能出现类型不匹配的问题：

return image.isPublic || (image.user && image.user.toHexString() === user._id.toHexString());

内容的提问来源于stack exchange，提问作者Lip