Create React App中无法下载public文件夹内CSV文件问题咨询

核心原因 #

你遇到的问题是路径解析错误，导致请求的资源不存在，被Create React App的SPA fallback机制重定向到了应用的index.html页面。

Create React App的public文件夹是静态资源的根目录，当你使用相对路径csv/exampleCSV.csv发起请求时：

• 如果当前页面路由是根路径（/），请求路径会被解析为/csv/exampleCSV.csv，这是正确的；
• 但如果当前页面处于子路由（比如/dashboard），相对路径会被解析为/dashboard/csv/exampleCSV.csv，这个路径不存在，此时Create React App会返回默认的index.html作为 fallback，所以你下载到的是HTML页面。

你可以打开浏览器开发者工具的Network面板，查看这个fetch请求的状态码，大概率是404，这也能佐证路径错误的问题。

解决办法 #

把fetch的路径改成绝对路径，开头加上斜杠，确保请求始终指向public文件夹下的csv文件：

fetch('/csv/exampleCSV.csv')
  .then(response => {
    // 先判断请求是否成功
    if (!response.ok) {
      throw new Error('请求失败');
    }
    return response.blob();
  })
  .then(blob => {
    let url = window.URL.createObjectURL(blob);
    let a = document.createElement('a');
    a.href = url;
    a.download = 'exampleCSV.csv';
    a.click();
    // 释放URL对象，避免内存泄漏
    window.URL.revokeObjectURL(url);
  })
  .catch(err => {
    console.error('下载出错:', err);
  });

额外注意事项 #

• 确保public/csv/exampleCSV.csv文件确实存在，文件名和路径的大小写要和代码里一致（比如Linux/macOS系统区分大小写，ExampleCSV.csv和exampleCSV.csv是不同的）；
• 加上错误捕获逻辑，能帮你快速定位请求失败的原因。

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