React Native开发密码更新功能时触发Unexpected token '<'的JSON解析报错

这个报错没有玄学，触发原因100%是：你调用res.json()解析响应时，拿到的字符串第一个字符是<，也就是返回的根本不是JSON，是从<html>开头的HTML文本。结合你已经验证过的接口逻辑、参数格式，按以下步骤排查即可快速定位问题：

第一步：打印原始响应，直接确认返回内容 #

不要在代码里直接对fetch返回值链式调用res.json()，改为先读取原始响应文本，打印后定位问题：

// 原有报错代码示例
const res = await fetch(`${config.API_URL}/user/password`, {
  method: 'PUT',
  // ...其他请求配置
})
const result = await res.json() // 报错抛出位置

// 修改为先读取原始文本再解析
const res = await fetch(`${config.API_URL}/user/password`, {
  method: 'PUT',
  // ...其他请求配置
})
const rawResponseText = await res.text()
console.log('改密码接口原始响应：', rawResponseText)
// 确认返回内容为JSON格式后再执行解析
const result = JSON.parse(rawResponseText)

只要打印的原始内容开头是<（比如<!DOCTYPE html>、<html>），就能确认请求根本没有走到你验证过的updateUserPassword业务逻辑，而是被其他环节拦截返回了HTML格式的错误/跳转页面。

第二步：对照常见触发原因逐一排查 #

这类问题90%以上都出在业务逻辑之前的环节，和你已经核对过的接口内部校验、参数格式无关，常见原因包括：

• 接口路径不匹配：比如前端拼接的请求路径和服务端注册的实际路由有差异——常见的比如单复数拼写错误（前端写/user/password，服务端路由是/users/password）、缺失统一API前缀、路由对末尾斜杠的兼容问题，匹配不到路由时，服务端兜底逻辑会返回404 HTML页面，第一个字符就是<。
• 请求方法不匹配：前端用PUT方法发请求，但对应路径下的服务端路由只支持POST等其他方法，框架会返回405方法不允许的HTML错误页，不会执行业务接口逻辑。
• 请求被中间件拦截：改密码接口的认证中间件校验不通过——比如Token过期、Token格式不符合要求、用户权限不足，中间件直接返回登录跳转的HTML页面，根本不会走到你写的密码更新逻辑；可以和能正常工作的getProfile接口对比请求头，确认认证Token的携带方式和格式完全一致。
• 跨域预检失败：PUT请求属于非简单请求，浏览器会先发送OPTIONS预检请求，如果预检配置不通过，网络层会直接返回HTML格式的跨域错误页，请求根本不会发送到服务端业务接口。
• 服务端未捕获异常：接口内部执行时抛出未捕获的运行时错误，服务端默认的500错误兜底返回的是HTML格式的错误页，而非你预期的JSON响应。

第三步：通过网络面板交叉验证 #

打开RN调试工具的网络请求面板，找到改密码接口的请求，核对三个核心信息：

• 实际请求的完整URL，是否和服务端注册的路由完全一致，没有拼写偏差
• 请求返回的HTTP状态码：如果状态码是401、403、404、405、500，就说明请求没有到达目标业务接口，不存在你之前验证的逻辑执行流程
• 响应头的Content-Type字段：如果值是text/html而非application/json，就确认返回内容不是JSON，和你的解析逻辑预期不匹配

快速验证技巧 #

可以直接用命令行工具或API调试工具，携带正确的认证Token、PUT请求方法，手动访问改密码接口：

• 如果手动调试时同样返回HTML内容：问题出在服务端的路由注册、中间件拦截、错误兜底逻辑上，和前端代码无关
• 如果手动调试时可以正常返回JSON内容：问题出在前端请求拼接环节，重点检查路径拼写、请求方法、请求头配置即可

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