如何在无NodeJS的React项目中提供JSON文件作为API

关键思路 #

用create-react-app创建的项目里，public目录是专门存放静态资源的区域，放在这里的文件会被服务器直接返回，不会被React的SPA路由拦截，刚好能满足你返回纯JSON数据的需求。

操作步骤 #

• 放置JSON文件
  直接把你的JSON文件（比如命名为api-data.json）放到项目根目录的public文件夹中，示例内容如下：

  {
    "author": "holydragon",
    "content": ["sample1", "sample2", "sample3"]
  }
  

• 验证访问效果
  开发环境启动项目后，在浏览器访问http://localhost:3000/api-data.json，就能看到纯JSON内容，不会混入HTML标签。
  生产环境执行npm run build打包后，把build目录部署到静态服务器，访问对应域名下的/api-data.json即可拿到纯JSON数据。

之前方法失效的原因 #

你之前参考的方案应该是把JSON放在src目录下，或者尝试通过React组件路由返回数据，这种情况会被React的SPA路由拦截，返回的是React的入口HTML页面。而public目录是静态资源的“直通通道”，服务器会直接返回文件本身的内容。

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