Chrome 65阻止跨域<a download>，求客户端强制下载解决方案

嘿，这个问题我之前帮不少开发者踩过坑——Chrome 65之后确实一刀切禁用了跨域<a>标签的download属性，初衷是防跨域信息泄露，但确实把很多无服务器下载的场景给搞崩了。下面给你几个纯客户端层面的可行方案，按需选择：

方案1：Fetch API + Blob 实现自动下载（通用方案） #

这是最普适的方法，只要目标服务器支持CORS（设置了Access-Control-Allow-Origin响应头）就能用。原理是先通过Fetch拉取跨域资源转成Blob，再生成本地的Object URL，最后用带download的<a>标签触发下载：

async function downloadCrossDomainFile(url, filename) {
  try {
    // 发起跨域请求，必须确保服务器允许CORS
    const response = await fetch(url, {
      mode: 'cors',
      credentials: 'omit' // 如果需要带Cookie就改成'include'，但要服务器配合
    });
    
    if (!response.ok) throw new Error(`请求失败，状态码：${response.status}`);
    
    // 把响应转成Blob对象
    const blob = await response.blob();
    // 生成本地可访问的URL
    const blobUrl = URL.createObjectURL(blob);
    
    // 创建临时<a>标签触发下载
    const downloadLink = document.createElement('a');
    downloadLink.href = blobUrl;
    downloadLink.download = filename;
    document.body.appendChild(downloadLink);
    downloadLink.click();
    
    // 清理资源，避免内存泄漏
    setTimeout(() => {
      URL.revokeObjectURL(blobUrl);
      document.body.removeChild(downloadLink);
    }, 100);
  } catch (error) {
    console.error('下载出错：', error);
    alert('无法自动下载，请检查资源是否允许跨域访问');
  }
}

// 调用示例：下载一张跨域图片
downloadCrossDomainFile('https://example.com/remote-image.jpg', '我的旅行照片.jpg');

注意：如果目标服务器没开CORS，这个方法会直接报错——浏览器的同源策略是硬限制，客户端绕不开。

方案2：Canvas 处理图片类资源（仅适用于图片） #

如果是跨域图片，且服务器允许跨域（设置了Access-Control-Allow-Origin），可以用Canvas转成Blob再下载，适合图片专属场景：

function downloadCrossDomainImage(url, filename) {
  const img = new Image();
  // 开启跨域模式，必须服务器配合
  img.crossOrigin = 'anonymous';
  
  img.onload = function() {
    const canvas = document.createElement('canvas');
    canvas.width = this.width;
    canvas.height = this.height;
    const ctx = canvas.getContext('2d');
    ctx.drawImage(this, 0, 0);
    
    // 把Canvas内容转成Blob并下载
    canvas.toBlob(function(blob) {
      const blobUrl = URL.createObjectURL(blob);
      const downloadLink = document.createElement('a');
      downloadLink.href = blobUrl;
      downloadLink.download = filename;
      document.body.appendChild(downloadLink);
      downloadLink.click();
      
      setTimeout(() => {
        URL.revokeObjectURL(blobUrl);
        document.body.removeChild(downloadLink);
      }, 100);
    }, 'image/png'); // 可以改成image/jpeg，记得同步调整文件名后缀
  };
  
  img.onerror = function() {
    alert('无法加载图片，大概率是服务器不允许跨域访问');
  };
  
  img.src = url;
}

// 调用示例
downloadCrossDomainImage('https://example.com/remote-pic.png', '保存的图片.png');

注意：如果服务器没开跨域，Canvas会被“污染”，无法导出Blob，这个方法就失效了。

方案3：折中引导——手动右键保存（无服务器支持时的无奈之举） #

如果目标服务器完全不配合开CORS，那客户端层面真的没办法绕过浏览器的安全限制实现自动下载。这时候只能做友好引导，让用户手动操作：

<!-- 直接显示引导链接 -->
<a href="https://example.com/remote-file.pdf" target="_blank">点击打开文件 → 右键选择「另存为」保存到本地</a>

或者用JS弹出提示，增强用户体验：

function promptManualDownload(url) {
  alert('由于浏览器安全限制，无法自动下载，请点击下面的链接打开文件后右键保存');
  const link = document.createElement('a');
  link.href = url;
  link.target = '_blank';
  link.textContent = '点击打开文件';
  document.body.appendChild(link);
}

// 调用示例
promptManualDownload('https://example.com/remote-file.pdf');

总结 #

客户端层面的核心限制就是浏览器的同源策略，所有自动下载方案都必须依赖目标服务器开启CORS。如果服务器不配合，只能引导用户手动保存——毕竟浏览器的安全规则是硬限制，客户端没有办法绕过。

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