React使用a标签下载本地文件报Not Allowed To Load Local Resource如何解决

Not Allowed To Load Local Resource 是浏览器的同源安全策略强制限制，所有运行在浏览器环境的 JavaScript 代码都被禁止直接读取、加载本地磁盘的绝对路径资源，该限制和 React 框架无关，原生 JS 也无法绕过。你传入的M:/folderfname/filename.xlsx属于本地磁盘路径，浏览器会自动拼接file://协议识别为本地资源，直接触发安全拦截。

如果你确实需要读取用户本地磁盘上的任意文件，必须通过<input type="file">让用户主动选择文件，JS 仅能读取用户主动选中的文件内容，无法自行读取指定路径的本地文件。

场景1：待下载文件存放在前端项目静态资源目录 #

• 将所有可下载文件放到 React 项目的public静态资源目录下（Vite、CRA 构建的项目均适用）
• 下载时直接赋值静态资源相对路径即可，示例代码：

const downloadFile = (dynamicFileName) => {
  const link = document.createElement("a");
  link.download = dynamicFileName;
  // 示例：文件都放在public下的download文件夹内
  link.href = `/download/${dynamicFileName}`;
  document.body.appendChild(link);
  link.click();
  link.remove();
};

// 调用时直接传入动态生成的文件名即可
downloadFile("filename.xlsx");

场景2：待下载文件由后端接口提供 #

• 后端返回文件流，前端通过 Blob 处理后下载，动态文件名可前端指定也可从接口content-disposition响应头提取，示例代码：

const downloadFile = async (dynamicFileName) => {
  // 请求后端下载接口，可传入动态文件名作为参数
  const res = await fetch(`/api/getFile?fileName=${dynamicFileName}`, {
    method: "GET",
  });
  // 将接口返回的文件流转为Blob对象
  const fileBlob = await res.blob();
  // 生成临时访问URL
  const tempUrl = window.URL.createObjectURL(fileBlob);
  
  const link = document.createElement("a");
  link.download = dynamicFileName;
  link.href = tempUrl;
  document.body.appendChild(link);
  link.click();
  
  // 释放临时URL占用的内存
  window.URL.revokeObjectURL(tempUrl);
  link.remove();
};

场景3：文件为前端动态生成（如前端导出表格为xlsx） #

• 直接将生成的文件内容转为 Blob 对象，复用上述 Blob 下载逻辑即可，完全支持动态文件名，不需要依赖任何本地路径。

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