使用fetch方法下载视频时文件大小为0字节的原因排查

核心问题出在你使用的mode: 'no-cors'配置上：

• 当fetch启用no-cors模式时，浏览器会返回不透明响应（opaque response），这种响应的内容完全被浏览器屏蔽，你无法读取任何实际数据，因此response.blob()得到的是空Blob，最终下载的文件自然是0字节。
• 额外说明：手动设置Content-Type: video/mp4作为请求头是多余的，甚至可能干扰服务器的正常处理，浏览器会根据请求类型自动生成合适的请求头。

1. 移除no-cors模式 #

直接删除fetch配置里的mode: 'no-cors'，让请求默认使用cors模式：

async function downloadVideo(link) {
  try {
    const response = await fetch(link, {
      method: 'GET'
      // 移除no-cors和多余的Content-Type头
    });

    if (!response.ok) {
      throw new Error(`请求失败: ${response.status}`);
    }

    const blob = await response.blob();
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = 'video.mp4';
    a.click();
    URL.revokeObjectURL(url);
  } catch (error) {
    console.error(error);
  }
}

如果此时浏览器报跨域错误，说明目标服务器没有配置CORS（跨域资源共享）允许你的域名访问，可采用下面的方案解决。

2. 绕过CORS限制的方案 #

方案A：使用浏览器跨域插件

开发测试阶段，可安装浏览器的跨域请求插件（比如Chrome的「Allow CORS: Access-Control-Allow-Origin」），临时绕过CORS限制，让代码正常请求视频资源。

方案B：搭建本地代理服务器

若插件使用不便，可搭建简单的Node.js代理服务器，让代理去请求视频URL，前端请求代理服务器（同域名无跨域问题）。示例代码如下：
首先安装依赖：

npm install express http-proxy-middleware

创建代理文件proxy.js：

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

const app = express();

app.use('/video-proxy', createProxyMiddleware({
  target: 'https://rexample', // 替换为你的视频域名
  changeOrigin: true,
  pathRewrite: {
    '^/video-proxy': '' // 去掉代理路径前缀
  }
}));

app.listen(3000, () => {
  console.log('代理服务器运行在 http://localhost:3000');
});

启动代理后，前端代码里把视频URL替换为http://localhost:3000/video-proxy即可调用下载函数。

方案C：配置服务器CORS（若有权限）

如果你能控制目标视频服务器的配置，直接在服务器上添加CORS响应头，允许你的域名访问：
比如Nginx配置中添加：

add_header Access-Control-Allow-Origin "你的前端域名";
add_header Access-Control-Allow-Methods "GET";

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