React摄像头录制视频上传API失败，Python/Postman正常——CORS或Axios问题？

你遇到的核心问题是：React实时捕获的摄像头视频Blob上传至FastAPI失败，但本地文件上传、Postman/Python脚本请求均正常。结合你的配置，问题主要集中在Axios请求头处理、Blob完整性、浏览器安全策略这几个方向，以下是具体排查和解决步骤：

1. 移除手动设置的multipart/form-data请求头 #

这是最常见的坑：当你手动给Axios指定"Content-Type": "multipart/form-data"时，浏览器自动生成的boundary分隔符会丢失——而FastAPI解析multipart请求必须依赖这个boundary。Postman和Python会自动处理boundary，所以能正常请求。

修复代码： #

try {
    const response = await axios.post(
        "https://link/process-video/",
        formData,
        {
            // 删掉这行手动设置的Content-Type
            withCredentials: false,
        }
    );
    console.log("Response:", response.data);
} catch (error) {
    console.error("Error uploading video:", error);
}

2. 检查实时捕获的视频Blob完整性 #

摄像头录制的Blob可能存在编码或收尾问题：

• 确认录制逻辑中MediaRecorder已正确调用stop()，生成完整的Blob（未正常停止的Blob会导致解析失败）
• 打印Blob信息验证格式：

  console.log("Blob类型:", videoBlob.type); // 应为video/webm
  console.log("Blob大小:", videoBlob.size); // 30秒视频应大于0
  

3. 排查HTTPS混合内容限制 #

如果你的React应用和FastAPI接口协议不一致（一个HTTPS、一个HTTP），浏览器会阻止混合内容请求，即使CORS配置允许所有源。

• 确保两者协议统一：开发环境可都用HTTP，生产环境都用HTTPS

4. 验证FastAPI后端的文件接收逻辑 #

确认后端接口中video字段使用UploadFile类型（而非bytes），它对大文件/Blob的处理更稳定：

from fastapi import UploadFile, File

@app.post("/process-video/")
async def process_video(
    gender: str,
    diabetes: bool,
    height: int,
    # ... 其他字段
    video: UploadFile = File(...)
):
    # 处理逻辑

5. 排查依赖版本问题 #

你标注的React版本10.8.1明显异常（React最新稳定版为18+），大概率是笔误；若Axios版本过旧，也可能存在FormData处理Bug：

• 升级Axios到最新稳定版：

  npm install axios@latest
  

最后排查技巧 #

1. 打开Chrome开发者工具Network面板：
   • 查看失败请求的Content-Type是否包含boundary=xxxxxx
   • 检查Payload中video字段是否有有效内容
   • 查看Response的具体错误码（400=请求解析失败，500=后端逻辑错误）
2. 用原生fetch替代Axios测试，排除Axios的问题：

   const uploadVideo = async () => {
       const formData = new FormData();
       // ... 填充formData字段
       try {
           const response = await fetch("https://link/process-video/", {
               method: "POST",
               body: formData,
               credentials: "omit"
           });
           const data = await response.json();
           console.log("Response:", data);
       } catch (error) {
           console.error("Error:", error);
       }
   };
   

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