新年批量下载指南：跨域挑战下的巧妙破解** 新年批量下载指南：跨域挑战下的巧妙破解

前端

2023-09-14 11:43:43

关键词：

新年将至，大家都准备着回家过年。在整理资料时，我遇到一个看似简单的需求：批量下载多份压缩包。然而，事情并不像想象中那么顺利，一个跨域下载的问题差点让我翻车。

跨域下载的阻碍

这个需求的关键在于，点击下载按钮后，后端返回一个包含下载地址URL数组的响应。而问题在于，这些下载地址与当前系统不在同域，而浏览器出于安全考虑，会限制跨域下载。

这意味着，我无法直接在前端触发下载。如果强行使用常规的方法，页面会出现抖动，下载功能将无法正常使用。

巧妙破解：iframe 和前端下载

经过一番思考，我找到了两个巧妙的解决方案：iframe 和前端下载。

方案 1：iframe

iframe 可以加载另一个域的资源，不受同域限制。我创建了一个iframe，将其src属性设置为下载URL，然后触发iframe的下载操作。这样，下载过程可以在 iframe 中完成，而不会影响主页面。

方案 2：前端下载

另一种方法是使用前端下载技术。XMLHttpRequest 或 Fetch API 允许前端直接从服务器下载文件。我使用 Fetch API，将下载URL作为参数，并使用 blob() 方法创建了一个 Blob 对象。然后，我使用 URL.createObjectURL() 方法创建了一个可下载的URL，并触发下载。

具体实现

根据需求，我选择了iframe方案。下面是实现代码：

const downloadButton = document.getElementById("download-button");

downloadButton.addEventListener("click", () => {
  const iframe = document.createElement("iframe");
  iframe.style.display = "none";
  iframe.src = "YOUR_DOWNLOAD_URL";
  document.body.appendChild(iframe);

  // 模拟 iframe 中的下载点击事件
  setTimeout(() => {
    const iframeWindow = iframe.contentWindow;
    const downloadLink = iframeWindow.document.querySelector("a[href*='.zip']");
    downloadLink.click();
  }, 100);
});