axios请求PC端正常移动端报错Cannot read properties of undefined(reading 'data')

问题根因分析 #

• 报错的直接原因是catch块中捕获的错误对象err上不存在response属性，导致读取err.response.data时抛出空引用异常
• PC端正常、移动端异常的常见诱因：
  1. 代码请求头存在拼写错误：Context-Type为错误写法，正确应为Content-Type。PC端浏览器内核对错误请求头的容错性更高，会自动补正或忽略该错误，而移动端内核（安卓WebView、iOS Safari等）容错性更低，会导致服务端无法正常识别请求格式，无法返回预期的400校验错误响应，直接触发网络层面的请求失败，这类场景下axios不会填充err.response属性
  2. 移动端更容易出现弱网、广告/隐私拦截插件拦截请求的情况，请求根本未到达服务端的场景下，也不会生成err.response
  3. 额外冗余逻辑：err.response.data不需要加await，axios会自动解析响应内容，多余的await在部分低版本移动端运行环境下会触发非预期行为

修复方案 #

首先修正请求头拼写错误，同时在catch块增加空值校验，覆盖无响应的异常场景，修正后代码如下：

try {
  const config = {
    headers: {
      // 修正请求头拼写错误
      "Content-Type": "application/json",
    },
  };

  const res = await axios.post(
    USERS_PATH,
    {
      name,
      surname,
      email,
      password,
      repeatedPassword,
    },
    config
  );
  console.log(res.data);
} catch (err) {
  // 先判断response是否存在，存在再读取data
  if (err.response?.data) {
    userCtx.updateAlertMessage(Object.values(err.response.data).flat());
  } else {
    // 自定义无响应场景的提示文案
    userCtx.updateAlertMessage(["网络异常，请检查网络设置后重试"]);
  }
}

如果你的运行环境不支持可选链语法，可以替换为传统多级判空写法：

if (err.response && err.response.data) {
  // 原有业务逻辑
}

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