在Next.js站点流式播放Bunny CDN视频时遭遇CORB问题

问题原因 #

你遇到的CORB（跨源读取阻止）错误，核心原因有两点：

• 当前使用的https://video.bunnycdn.com/play/...并非直接视频文件链接，而是BunnyCDN的播放页面入口，浏览器请求后返回HTML内容，与video组件预期的媒体资源类型不符，触发安全拦截。
• 即便使用直接视频文件链接，若BunnyCDN未配置正确的CORS响应头，浏览器也会因跨源限制阻止资源读取。

解决方案 #

1. 替换为BunnyCDN直接视频文件URL #

放弃play路径的链接，改用存储区中视频文件的直接访问地址，格式通常为：

https://[你的存储区域名].bunnycdn.com/[视频文件路径].mp4

例如你的存储区域名为my-videos.bunnycdn.com，视频文件存于根目录demo.mp4，则链接为https://my-videos.bunnycdn.com/demo.mp4。

2. 配置BunnyCDN的CORS规则 #

登录BunnyCDN后台，找到对应存储区进入CORS设置页面，添加规则：

• 允许来源：填写你的Next.js站点域名（如https://your-nextjs-site.com，生产环境不建议用*允许所有域名）
• 允许方法：勾选GET（视频播放仅需GET请求）
• 允许头部：可填*或必要请求头
• 保存配置后等待数分钟生效

3. 用Next.js API路由做代理（备用方案） #

若无法修改BunnyCDN的CORS配置，可在Next.js中创建代理路由转发视频请求：

1. 在pages/api目录下创建proxy-video.js文件：

export default async function handler(req, res) {
  const { url } = req.query;
  if (!url) {
    res.status(400).send('缺少视频URL参数');
    return;
  }

  try {
    const response = await fetch(url);
    // 转发响应头
    res.setHeader('Content-Type', response.headers.get('Content-Type'));
    res.setHeader('Content-Length', response.headers.get('Content-Length'));
    // 流式返回视频内容
    response.body.pipe(res);
  } catch (error) {
    res.status(500).send('代理请求失败');
  }
}

2. 在video组件中使用代理链接：

<video
  width={600}
  controls={true}
  autoPlay={false}
  muted={true}
  loop={true}
  playsInline
  preload="metadata"
  src={`/api/proxy-video?url=${encodeURIComponent('你的视频文件URL')}`}
/>

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