fetch请求报JSON.parse错误但浏览器开发者工具可见正常返回数据

问题原因 #

• 最常见的是CORS预检请求处理错误：本地服务未正确处理OPTIONS类型的预检请求。浏览器发起跨域请求（哪怕是localhost不同端口也属于跨域）时，会先发送OPTIONS请求探测跨域权限，如果服务端对OPTIONS请求返回空响应或者非200/204状态码，fetch会把这个空的OPTIONS响应当成最终结果，而网络面板里看到的完整JSON是后续真实业务请求的返回，两者出现了混淆。
• 其次可能是fetch请求模式配置错误：如果你的init参数里手动设置了mode: 'no-cors'，会导致返回的响应类型为opaque，所有响应体内容会被浏览器隐藏，所以text()返回空、json()解析报错，但网络面板依然可以看到实际返回的内容。
• 少数情况是服务端响应头异常：服务端返回的Content-Length数值小于实际JSON的字节数，导致浏览器只读取了截断后的空内容，或者没有指定正确的Content-Type: application/json编码。
• 也可能是重定向配置问题：如果服务端存在301/302重定向，且fetch配置里设置了redirect: 'manual'，会导致拿到的是重定向响应的空内容，而非最终接口的返回。

解决方法 #

• 修复服务端的CORS预检逻辑：收到OPTIONS请求时直接返回204状态码，同时配置正确的跨域响应头（Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers），不要让OPTIONS请求走到业务逻辑返回空内容。
• 移除mode: 'no-cors'配置：如果存在跨域问题优先通过服务端配置CORS解决，no-cors仅适用于不需要读取响应内容的场景（比如埋点上报），无法用于获取返回数据。
• 校验服务端响应头：确认接口返回的Content-Length数值和实际JSON的字节数一致，Content-Type设置为application/json; charset=utf-8。
• 调整重定向配置：如果不需要手动处理重定向，将fetch的redirect参数设置为默认的follow，让浏览器自动跟随重定向拿到最终接口的返回。

你可以先打印响应的基础信息快速定位问题：

fetch(url, init)
  .then(res => {
    console.log('响应状态码：', res.status)
    console.log('响应类型：', res.type)
    return res.text()
  })
  .then(text => console.log('响应文本内容：', text))

如果输出的响应类型是opaque，就是no-cors配置的问题；如果状态码为非200的异常状态，就是服务端请求处理的问题。

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