Axios请求报错Cannot read property of undefined及500错误排查求助

问题根因 #

• 第一，你在前端自行生成JWT的逻辑完全不符合规范：JWT必须由服务端签发，你前端代码里直接持有jwtSecret是严重的安全漏洞，且服务端校验JWT的时候会拿自己存储的密钥校验，你前端自己生成的JWT根本通不过校验，这是触发500错误的最可能原因。前序fetch示例里的JWT也是取的已经生成好的acct.jwt，不是前端自行签名生成的。
• 第二，TypeError报错是因为你混用了async/await和.then/.catch的写法，请求出错走到catch分支后没有返回值，你声明的dto变量会是undefined，后续如果读取dto的属性就会触发这个报错。
• 第三，response.data返回HTML是服务端报错时默认返回的错误页面内容，不是接口预期的JSON结构，直接操作这段HTML自然会报错。

修复方案 #

1. 删掉前端自行生成JWT的逻辑，从你项目的登录接口返回结果中获取服务端签发的合法JWT，放到Authorization请求头中。
2. 调整请求代码逻辑，和前序fetch实现的逻辑对齐，统一用try/catch处理异步错误，示例代码如下：

async jwtTest(visitorId: number, oldPatientId: number, doctorId: number): Promise<void> {
  if (!this.localConfig.spyrt.active) return
  
  const data = {
    visitorId,
    patientId: oldPatientId,
    doctorId
  }
  // 替换为登录后存储在本地的服务端签发JWT
  const userJWT = window.localStorage.getItem('userJWT') as string
  const headers = {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${userJWT}`
  }

  try {
    const response = await axios.post(visitURL, data, { headers })
    console.log('请求成功', response.data)
    // 后续业务逻辑
  } catch (error) {
    // 打印详细错误信息方便排查
    if (axios.isAxiosError(error)) {
      console.log('错误状态码：', error.response?.status)
      console.log('服务端返回错误内容：', error.response?.data)
    }
    console.error('请求失败', error)
  }
}

3. 如果修改JWT获取逻辑后仍然返回500，直接把请求的参数、请求头信息复制到Postman中模拟调用，或者联系后端同事查看对应接口的服务端错误日志，500错误的具体根因在服务端日志中可以直接定位。

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