CRA应用生产构建后无法通过Axios获取public下的tmp.json

• 开发环境下CRA自带的热更新服务会自动把public目录映射为站点根路径，写相对路径tmp.json可以正常命中文件
• 生产构建后，写的相对路径tmp.json是相对于当前页面URL的路径，不是相对于站点根路径：如果应用不是部署在域名最外层路径（比如部署在子目录https://example.com/web/下），实际请求地址会和build目录下生成的tmp.json实际存放的地址完全错位
• 现有代码没有捕获请求异常，请求失败时没有任何提示，看起来就像Promise一直没有resolve

• 替换硬编码的相对路径，改用CRA内置的公共路径变量拼接资源地址：把原代码里的axios.get("tmp.json")修改为axios.get(${process.env.PUBLIC_URL}/tmp.json)

  process.env.PUBLIC_URL是CRA构建时自动注入的内置变量，会自动匹配项目package.json里配置的homepage字段，不管应用部署在根域名还是子路径下，都能正确指向打包后public目录对应的静态资源地址

• 简化冗余的状态更新逻辑：原代码里的setFileList((fileList = res.data))属于绕弯写法，直接传值即可，即setFileList(res.data)，不需要额外给fileList变量赋值再传参
• 补充请求错误捕获逻辑，避免Promise无响应时完全排查不到问题，参考写法：

axios.get(`${process.env.PUBLIC_URL}/tmp.json`)
  .then((res) => {
    setFileList(res.data);
  })
  .catch((error) => {
    console.error("拉取本地JSON失败", error);
  })

• 额外排查项：检查部署静态资源的服务器配置，确保所有.json后缀的静态文件会被正确返回，不会被单页应用的路由兜底规则拦截（不少SPA部署配置会把所有非静态资源的请求重定向到index.html，这时候请求tmp.json拿到的会是HTML内容，不是预期的JSON结构，也会导致后续渲染逻辑异常）

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