如何将API返回的视频路径转换为可用URL并传入React视频播放器播放

1. 正确获取API返回数据 #

当前你写的axios请求逻辑基础是可用的，补充以下几个容易出错的点即可：

• 先解决跨域问题：React前端运行端口（默认3000）和FastAPI服务端口（8000）不一致会触发跨域拦截，需要在FastAPI侧配置CORS中间件：

from fastapi import FastAPI
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"], # 生产环境替换为你的前端实际域名
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

• 确认响应数据层级：拿到response.data后先打印查看结构，确认是你需要的路径数组，避免后端返回嵌套结构（比如{list: [...]}）导致取错数据。
• 列表渲染加唯一key：React要求遍历渲染列表项必须添加唯一key属性，避免控制台警告。

2. 本地路径转换为可播放URL #

你现在拿到的是FastAPI服务端的本地文件绝对路径，浏览器无法直接访问服务端的本地文件系统，需要做以下改造：

第一步：FastAPI侧配置静态资源服务 #

将视频存储的目录挂载为静态资源路由，让外部可以通过HTTP访问到视频文件：

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

app = FastAPI()
# 挂载视频目录到 /videos 路由
app.mount("/videos", StaticFiles(directory="/home/vinsent/Videos/Fraction_webapp/FastAPI-RedisDB/videos"), name="videos")

配置完成后，videos目录下的video13.mp4就可以通过http://127.0.0.1:8000/videos/video13.mp4直接访问。

第二步：路径转换 #

有两种实现方式，二选一即可：

• 方案1（更推荐）：后端接口直接返回拼接好的可访问URL，不需要前端处理路径，后续目录调整只需要改后端逻辑。
• 方案2：前端截取路径中的文件名拼接成可访问URL，修改你的渲染逻辑如下：

<div>
  {this.state.data.map((videoPath, index) => {
    // 从全路径中截取视频文件名
    const fileName = videoPath.split('/').pop()
    // 拼接成可播放的HTTP URL
    const playUrl = `http://127.0.0.1:8000/videos/${fileName}`
    // 注意添加controls属性显示播放控件
    return <video key={index} src={playUrl} controls width="600"></video>
  })}
</div>

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