React Axios 请求本地静态资源

[jtwang7]

参考：create-react-app中使用axios请求本地json文件

问题描述

React 中请求本地资源，在项目通过 npm start 启动后，无法成功请求。通过 debug 定位发现请求的路径存在问题。

解决方法

在 React 中请求本地资源时，必须把静态文件放到 public 下才可以请求到。这是因为 axios 请求配置的实际根路径(baseURL)是 http://localhost:3000，项目启动后，axios 会在该根路径的基础上拼接静态资源的路径信息。假设 axios 配置如下：

axios.get('./data/xxx.csv', {
  baseURL: 'http://localhost:3000',
})

那么最终请求静态资源的路径为 http://localhost:3000/data/xxx.csv，而该路径对应的就是 react 项目中的 public 文件夹所在路径。

项目启动后的根目录对应 public 文件夹路径