如何创建可下载Contentful环境跨源资源的<a>标签？

根因已明确：HTML a 标签的download属性仅对同域资源生效，跨源场景下会被浏览器忽略，直接触发默认预览行为，以下是可行解决方案：

方案1：使用Contentful官方提供的下载参数（最简便） #

Contentful的资产CDN原生支持通过添加查询参数强制触发下载，无需调整复杂逻辑，直接给资源URL追加?dl=1即可，修改后的标签代码如下：

<a
  download="test.pdf"
  href="//assets.ctfassets.net/[contentfulID]/[contentfulID]/[contentfulID]/test.pdf?dl=1"
>
  <span>Download</span>
</a>

该参数会自动调整CDN返回的响应头Content-Disposition为attachment，强制浏览器触发下载行为，不受跨源限制。

方案2：前端通过Blob代理下载（无需修改服务端配置） #

如果需要自定义下载逻辑，不想依赖平台参数，可以前端先将跨源资源加载为Blob对象，再生成临时URL触发下载，示例代码如下：

async function downloadContentfulPDF(url, filename) {
  try {
    // fetch请求加载资源为blob，Contentful的CORS配置默认允许跨域GET请求
    const res = await fetch(url);
    const blob = await res.blob();
    // 生成临时下载链接
    const blobUrl = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = blobUrl;
    a.download = filename;
    document.body.appendChild(a);
    a.click();
    // 清理临时资源
    a.remove();
    window.URL.revokeObjectURL(blobUrl);
  } catch (err) {
    console.error('下载失败：', err);
  }
}

调用时给Download元素绑定点击事件即可：

<span onclick="downloadContentfulPDF('//assets.ctfassets.net/[contentfulID]/[contentfulID]/[contentfulID]/test.pdf', 'test.pdf')">
  Download
</span>

方案3：后端服务代理转发（适用于需要统一管控资源的场景） #

如果有自有后端服务，可以将下载请求先发送到你的同域后端接口，由后端请求Contentful的PDF资源，再返回给前端，此时资源属于同域返回，download属性可正常生效。

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