使用axios发送GET请求传参时无法匹配Express路由是什么原因？

• 路由匹配规则不匹配：后端定义的/search/:query是路径参数匹配规则，只有请求路径格式为/v1/users/search/[任意值]时才会命中该路由。而你前端通过axios的params配置传递的是查询参数，会自动拼接为url末尾的?key=value格式，最终请求路径是/v1/users/search?data=xxx，不符合路径参数的路由规则，自然匹配失败。
• 参数名不匹配：就算后续路由匹配成功，你路由中定义的路径参数名为query，对应req.params.query，但后端代码解构的是searchQuery，拿到的只会是undefined。

提供两种可二选一的修复方案：

方案1：保持使用路径参数传参 #

前端修改 #

直接把参数拼接到请求url路径中，无需使用params配置：

const searchQuery = 'any' 
let users = await axios.get(`http://localhost:3000/v1/users/search/${searchQuery}`)

后端修改 #

调整解构的参数名即可：

static async searchUsers(req, res) {
    // 路由中定义的参数名是query，从req.params取值
    const { query: searchQuery } = req.params
    console.log('searchQuery',req.params, searchQuery)
}

方案2：保持使用查询参数传参 #

前端无需修改，调整后端代码即可：

// 路由改为普通路径，不需要路径参数
router.get('/search', UserController.searchUsers);

static async searchUsers(req, res) {
    // 查询参数存放在req.query中，前端传递的参数键为data
    const { data: searchQuery } = req.query
    console.log('searchQuery',req.query, searchQuery)
}

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