React中Axios解析Laravel API返回的JSON时file键值为undefined

问题现象 #

Laravel API返回的JSON中明确包含file字段及其完整数据，但通过Axios请求后，解析得到的数据里file的值变为undefined。自定义transformResponse时：

• 打印原始响应字符串，file字段存在且数据完整
• 使用JSON.parse的reviver参数时，能正常打印file对应的值
• 最终解析后的对象中file却为undefined
• 直接解析原始响应字符串则无此问题

可能原因及排查方案 #

1. Axios全局配置/拦截器干扰 #

检查你的Axios实例是否存在全局的transformResponse或者响应拦截器，可能在你自定义处理之前/之后，有其他逻辑修改了file字段。比如全局拦截器中对返回数据做了过滤、转换，意外将file设为undefined。

排查方式：
暂时移除全局拦截器或全局transformResponse配置，仅使用当前请求的自定义处理，看问题是否消失。

2. JSON.parse的reviver函数隐式问题 #

虽然你的reviver看起来只是打印file的值并返回原value，但reviver的执行顺序是从最内层的键值对向外遍历。如果在处理父级对象时，存在未注意到的逻辑（比如其他key的处理）导致file属性被意外覆盖，也会出现此问题。

排查方式：
暂时移除reviver参数，直接使用JSON.parse(res)解析，看最终的data中file是否正常：

api.get(`xxxxx`, {
  transformResponse: (res) => {
    console.log(res);
    const data = JSON.parse(res);
    console.log(data);
    return data;
  },
}).then(res => {
  console.log(res.data);
});

3. Axios默认解析逻辑冲突 #

Axios默认会自动解析JSON响应，当你自定义transformResponse时，需要确保完全覆盖默认行为，或者正确处理返回值。如果你的自定义处理返回的数据结构和默认解析的结构不一致，可能导致后续处理出现异常。

排查方式：
尝试不使用自定义transformResponse，直接使用Axios默认解析：

api.get(`xxxxx`)
  .then(res => {
    console.log(res.data);
  });

观察此时file字段是否正常，以此判断是否是自定义transformResponse的问题。

4. 后续代码意外修改数据 #

检查then回调中对返回数据的处理逻辑，是否存在不小心将file设为undefined的情况，比如解构赋值错误、对象修改操作等。

总结 #

先从最简单的排查开始：去掉自定义transformResponse和reviver，直接打印Axios返回的原始解析数据，确认file是否存在。如果此时正常，再逐步排查自定义处理逻辑和全局配置的问题；如果依然异常，重点检查Laravel API的返回是否有特殊情况（比如动态生成file字段时的条件判断错误）。

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