Blazor下载Azure Blob文件点击a标签仅打开不触发下载问题咨询

• 跨域导致<a>标签的download属性失效
  浏览器同源策略限制了download属性的生效范围：仅当链接URL和当前站点属于同源，或者URL为blob:/data:协议时，download属性才会生效。你使用的Azure Blob Storage域名和站点域名不属于同源，因此设置的download属性会被浏览器直接忽略，对于txt、图片这类浏览器支持直接预览的文件，就会直接打开而非下载。
• Azure Blob返回的响应头不符合下载要求
  如果Blob的响应头中没有设置Content-Disposition: attachment，浏览器会默认按照资源类型决定是预览还是下载，可预览的资源就会直接在当前窗口打开。
• JS代码缺失必要触发逻辑（自动下载场景）
  你当前贴出的JS代码仅完成了a标签的创建和插入，没有调用a.click()触发点击动作，也没有在触发后移除临时创建的a标签，不过该问题不影响手动点击标签的行为。

方案1：生成SAS令牌时指定响应头（优先推荐） #

你在后端生成Azure Blob的SAS链接时，直接添加rscd（即Response Content Disposition）参数，指定值为attachment; filename=你的目标文件名，示例参数值：

rscd=attachment; filename=FileName.txt

这种方式下，Azure Blob返回资源时会自动携带Content-Disposition: attachment的响应头，浏览器收到响应后不管是否跨域都会直接触发下载，不需要修改前端逻辑。

方案2：前端转Blob后触发下载 #

如果不方便修改后端SAS生成逻辑，可以修改前端Download函数，先把跨域资源加载为Blob对象，再生成blob协议的URL触发下载，示例代码：

export async function Download(url, fileName) {
    // 先请求文件转blob
    const res = await fetch(url);
    const blob = await res.blob();
    // 生成blob协议URL，不受跨域限制
    const blobUrl = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = blobUrl;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    // 清理临时对象
    document.body.removeChild(a);
    window.URL.revokeObjectURL(blobUrl);
}

该方案不适合GB级大文件使用，大文件下载优先选择方案1。使用该方案需要提前在Azure Blob Storage的CORS配置中允许你的站点域名发起GET请求，否则fetch会跨域失败。

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