为什么React用Axios请求Laravel API返回null，Insomnia却能拿到数据？

核心原因大概率是React端取路由参数的方式错误，导致传给接口的学生ID无效，Laravel查询不存在的ID返回null，按以下步骤排查即可解决：

• 第一步：修正路由参数取值逻辑
  常规react-router配置下，动态路由参数存放在match.params对象下，你当前写的this.props.match.id是错误写法，修改为：

  async componentDidMount(){
      // 先打印确认拿到的ID是否和你Insomnia中测试的有效ID一致
      const std_id = this.props.match.params.id;
      console.log('请求的学生ID：', std_id);
      const result = await axios.get(`http://localhost:8000/api/edit-student/${std_id}`);
      // Axios返回的响应体默认存放在data字段下，直接打印result看不到接口返回数据
      console.log('接口返回结果：', result.data);
  }
  

• 第二步：核对浏览器请求链路
  打开浏览器F12控制台的「网络」标签，找到你发出的GET请求，确认：
  • 请求URL的ID参数是否正确，没有出现undefined之类的无效值
  • 请求头、参数和你在Insomnia中发送的请求完全一致
• 第三步：Laravel端增加容错逻辑
  避免查询不到数据时静默返回null，改为主动抛出404异常方便排查：

  public function edit($id){
      // 找不到数据直接返回404，不会返回200状态码带null的student字段
      $student = Student::findOrFail($id);
      return response()->json([
          "status" => 200,
          "student" => $student,
      ]);
  }
  

• 第四步：硬编码ID验证
  如果修改参数取值后还是有问题，先把请求的ID换成你Insomnia中测试有效的固定ID，比如：

  const result = await axios.get(`http://localhost:8000/api/edit-student/1`);
  

  如果此时能正常拿到数据，就可以100%确认是路由参数取值错误导致的问题，再去核对你的React路由配置即可。

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