原生JS跨域视频下载实战：fetch与iframe方案深度解析
跨域资源访问一直是前端开发中的痛点问题，尤其是当我们需要实现视频下载功能时。本文将深入探讨两种不依赖第三方库的原生JavaScript解决方案——fetch API和iframe方案，并分享实际开发中的避坑经验。
1. 跨域下载的技术背景与挑战
现代浏览器出于安全考虑实施了严格的同源策略（Same-Origin Policy），这给需要从不同域下载资源的前端开发者带来了不小挑战。视频下载场景下，我们通常面临三个核心问题：
- 跨域请求限制：直接通过XHR或fetch请求不同域的资源会被浏览器拦截
- 文件名控制：从URL下载的文件往往无法自定义文件名
- 协议限制：HTTP页面无法直接下载HTTPS资源，反之亦然
提示：同源策略是浏览器的安全基石，但合理的跨域方案能兼顾安全与功能需求
传统解决方案如JSONP不适用于二进制数据下载，而CORS需要服务端配合。下面我们将介绍两种纯前端解决方案。
2. fetch API方案实现与优化
fetch API提供了现代化的网络请求能力，结合Blob对象我们可以实现视频下载：
async function downloadWithFetch(url, filename) { try { // 处理协议问题 const normalizedUrl = url.replace(/^https?:/, '') const response = await fetch(`//${normalizedUrl}`) if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`) const blob = await response.blob() const objectUrl = URL.createObjectURL(blob) const anchor = document.createElement('a') anchor.href = objectUrl anchor.download = filename || extractFilenameFromUrl(url) anchor.click() // 及时释放内存 setTimeout(() => { URL.revokeObjectURL(objectUrl) anchor.remove() }, 100) } catch (error) { console.error('下载失败:', error) // 这里可以添加用户友好的错误提示 } } // 从URL提取默认文件名 function extractFilenameFromUrl(url) { return url.split('/').pop().split('?')[0] }关键优化点：
- 协议处理：移除
http:/https:前缀，避免混合内容问题 - 内存管理：使用
revokeObjectURL释放Blob内存 - 错误处理：完善的错误捕获和用户反馈机制
- 默认文件名：智能从URL提取合理的默认文件名
实际应用示例：
// 下载示例视频并自定义文件名 const sampleVideo = 'https://example.com/videos/sample.mp4' downloadWithFetch(sampleVideo, '我的定制视频名称.mp4')3. iframe方案实现与注意事项
对于某些特殊场景，iframe可以作为fetch的替代方案：
function downloadWithIframe(url, filename) { return new Promise((resolve, reject) => { const iframe = document.createElement('iframe') iframe.style.display = 'none' // 处理Safari兼容性 iframe.sandbox = 'allow-same-origin' iframe.onload = iframe.onerror = () => { try { const doc = iframe.contentDocument || iframe.contentWindow.document const anchor = doc.createElement('a') // 处理跨域限制 if (doc.URL === 'about:blank' || doc.defaultView.origin !== window.origin) { throw new Error('跨域限制：无法访问iframe内容') } anchor.href = url anchor.download = filename doc.body.appendChild(anchor) anchor.click() resolve() } catch (error) { reject(error) } finally { // 延迟移除以避免某些浏览器的竞态条件 setTimeout(() => iframe.remove(), 1000) } } document.body.appendChild(iframe) iframe.src = url }) }方案对比：
| 特性 | fetch方案 | iframe方案 |
|---|---|---|
| 跨域支持 | 需要服务端CORS或协议处理 | 依赖浏览器策略，限制较多 |
| 文件名控制 | 完全可控 | 部分浏览器不可控 |
| 内存占用 | 较高（需创建Blob） | 较低 |
| 浏览器兼容性 | 现代浏览器 | 广泛支持 |
| 进度跟踪 | 可通过ReadableStream实现 | 不可用 |
4. 实战中的常见问题与解决方案
问题1：混合内容警告
当HTTPS页面尝试下载HTTP资源时，现代浏览器会阻止这种"混合内容"。
解决方案：
- 统一使用
//协议相对URL - 服务端配置CORS头部
- 考虑使用代理服务中转请求
问题2：大文件下载内存溢出
fetch方案需要将整个文件加载到内存中转换为Blob，对于大视频文件可能导致内存问题。
优化方案：
async function streamDownload(url, filename) { const response = await fetch(url) const reader = response.body.getReader() const chunks = [] let received = 0 while(true) { const {done, value} = await reader.read() if(done) break chunks.push(value) received += value.length console.log(`已下载: ${(received / 1024 / 1024).toFixed(2)}MB`) } const blob = new Blob(chunks) // 后续下载逻辑... }问题3：移动端兼容性
iOS Safari对程序化下载有特殊限制：
- 必须由用户手势直接触发
- iframe方案可能完全无效
- 需要添加
<meta name="apple-mobile-web-app-capable" content="yes">
问题4：下载进度反馈
通过fetch的ReadableStream可以实现进度显示：
const response = await fetch(url) const contentLength = +response.headers.get('Content-Length') let loaded = 0 const reader = response.body.getReader() while(true) { const {done, value} = await reader.read() if(done) break loaded += value.length const percent = Math.round((loaded / contentLength) * 100) updateProgressBar(percent) // 更新UI }5. 高级技巧与最佳实践
技巧1：断点续传实现
通过Range头部可以实现断点续传：
// 检查服务器是否支持范围请求 const headResponse = await fetch(url, {method: 'HEAD'}) const acceptRanges = headResponse.headers.get('Accept-Ranges') if(acceptRanges === 'bytes') { // 从上次中断处继续下载 const startByte = localStorage.getItem(`resume_${fileId}`) || 0 const response = await fetch(url, { headers: {'Range': `bytes=${startByte}-`} }) // ...处理分块下载 }技巧2：下载队列管理
对于批量下载需求，可以实现优先级队列：
class DownloadQueue { constructor(maxConcurrent = 2) { this.queue = [] this.active = 0 this.maxConcurrent = maxConcurrent } add(task) { this.queue.push(task) this.run() } async run() { if(this.active >= this.maxConcurrent || !this.queue.length) return this.active++ const task = this.queue.shift() try { await task() } finally { this.active-- this.run() } } } // 使用示例 const queue = new DownloadQueue() queue.add(() => downloadWithFetch(url1, 'video1.mp4')) queue.add(() => downloadWithFetch(url2, 'video2.mp4'))技巧3：服务端配合方案
当纯前端方案受限时，可以考虑：
- 服务端中转下载
- 预签名URL（适用于云存储）
- WebSocket分块传输
在最近的一个媒体管理项目中，我们结合了fetch和Web Worker来实现后台大文件下载，用户即使离开页面也能继续下载。关键点是使用IndexedDB存储下载片段，并通过service worker管理下载状态。
