React+Express对接iTunes Search API请求返回404错误排查求助

问题根因 #

你遇到的404错误是前端请求路径和后端路由定义不匹配导致的：

• 后端定义的/search接口要求通过查询参数传递name和type两个字段
• 前端axios请求的路径为/search/${name}/${type}，是路径参数的写法，后端没有对应/search/:name/:type的路由规则，因此返回404状态码。

修复方案 #

二选一即可，推荐选择改动量更小的方案1：

方案1：修改前端请求逻辑 #

将search.js中的axios请求部分替换为以下代码，通过查询参数传值：

axios.get(`/search`, {
  params: {
    name: name,
    type: type
  },
  headers: {
    "Content-Type": "application/json",
  }
})

方案2：修改后端路由适配路径参数 #

如果要保留前端现有的路径参数写法，需要修改两处后端代码：

1. 修改routes/index.js中的路由定义：

   router.get("/search/:name/:type", getController);
   

2. 修改controllers/index.js中的参数获取逻辑，从路径参数取数：

   fetch(
     `https://itunes.apple.com/search?term=${req.params.name}&limit=30&media=${req.params.type}`
   )
   

其他需要修正的关联问题 #

修复404后还存在以下问题会导致功能异常，建议同步调整：

1. 分类选择不生效：Bootstrap的Dropdown.Item是按钮元素，没有onChange事件，需要替换为onClick事件取值：

   <Dropdown.Item
     as="button"
     key={i}
     id="searchcategories"
     value={category.value}
     onClick={(e) => setType(e.currentTarget.value)}
   >
   

2. 控制器冗余语法：controllers/index.js中controller的定义存在无效的逗号表达式，直接删掉多余的"/search"即可：

   exports.getController = (req, res) => {
     // 原有逻辑保持不变
   }
   

3. 接口异常捕获缺失：后端调用iTunes接口的逻辑没有加异常捕获，网络出错时会直接崩溃，建议补充错误处理：

   fetch(
     `https://itunes.apple.com/search?term=${req.query.name}&limit=30&media=${req.query.type}`
   )
   .then((res) => res.json())
   .then((results) => {
     res.send(results);
   })
   .catch(err => {
     console.error('iTunes API请求错误：', err)
     res.status(500).send({error: '搜索请求失败'})
   })
   

内容的提问来源于stack exchange，提问作者Chanelle Bösiger