原生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 nameapple-mobile-web-app-capable contentyes问题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管理下载状态。