社交平台单独上传图片或视频报TypeError: Network request failed错误原因求解

常见触发原因 #

• 首先排查FormData构造逻辑：绝大多数场景下是后端接口强制要求text字段不能为空，你在同时上传三类内容时默认携带了该字段，单独上传图片/视频时未主动传空值占位，后端直接拒绝请求且未返回标准响应格式，前端解析失败触发TypeError: Network request failed错误。
• 其次检查请求头配置：如果你在单独上传媒体文件时手动设置了Content-Type: multipart/form-data且未携带boundary参数，会覆盖浏览器自动生成的带合法boundary的请求头，后端无法解析请求体直接断开连接，触发网络错误。
• 确认文件处理逻辑是否一致：部分开发者会给多内容混合上传场景加专属的文件切片、压缩、分片逻辑，单独上传媒体文件时未启用对应逻辑，导致单文件大小超过后端/网关配置的上传上限，请求被直接拦截。
• 核对CORS配置：如果服务端的跨域规则仅允许携带特定参数的OPTIONS预检请求通过，单独上传媒体文件时的请求头字段和混合上传场景不一致，会导致预检请求被驳回，直接触发网络错误。

排查步骤 #

1. 打开浏览器开发者工具网络面板，分别抓取混合上传、单独传图、单独传视频的三类请求，对比请求URL、请求头、FormData参数的差异，重点确认是否有缺失必填参数、Content-Type配置是否正确
2. 查看后端服务访问日志，确认单独上传的请求是否成功到达后端，还是在网关/反向代理层就被拦截
3. 如果你使用的是React Native、Flutter这类端侧开发框架，额外检查是否对媒体上传请求配置了错误的代理、证书校验规则

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