React+TypeScript中FastAPI返回二进制视频创建Object URL加载失败求助

核心问题 #

你的代码存在两个关键错误，导致视频数据损坏无法被浏览器解析：

1. axios的responseType配置位置错误：它是请求配置的顶级属性，不应放在headers字段内。
2. responseType取值错误：不能设置为video/mp4，需使用blob或arraybuffer——否则axios会把二进制视频数据当成普通字符串解析，直接破坏原数据结构。

修正后的代码 #

路由Loader代码 #

import axios from "axios"

export const loader = async () => {
    const token = localStorage.getItem('access_token')
    const response = await axios.get(
        import.meta.env.VITE_API_URL + 'video/avatar.mp4',
        {
            headers: {
                'Authorization': `Bearer ${token}`
            },
            // 关键修正：responseType移至顶级配置，取值为blob
            responseType: 'blob'
        } 
    )
    // 直接使用返回的Blob对象创建URL，无需手动转换
    const videoURL = URL.createObjectURL(response.data)
    return videoURL
}

路由组件代码（补充内存泄漏处理） #

import { useLoaderData, useEffect } from "react-router-dom"

const VideoListContainer = () => {
    const videoURL = useLoaderData() as string

    // 组件卸载时清理Object URL，避免内存泄漏
    useEffect(() => {
        return () => {
            URL.revokeObjectURL(videoURL)
        }
    }, [videoURL])

    return (
        <div>
            <video controls>
                <source src={videoURL} type="video/mp4" />
            </video>
        </div>
    )
}

export default VideoListContainer

额外说明 #

• 当responseType设为blob时，axios会直接返回Blob类型的响应数据，无需手动二次转换，彻底避免数据损坏风险。
• 必须在组件卸载时调用URL.revokeObjectURL释放资源，否则会造成浏览器内存泄漏。
• 调试时可打印response.data的类型，若为Blob则说明配置正确。

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