create-react-app - 获取本地 JSON（通过 AJAX）答案

【问题标题】：create-react-app - Fetch Local JSON (via AJAX)create-react-app - 获取本地 JSON（通过 AJAX）
【发布时间】：2018-03-08 00:33:39
【问题描述】：

我正在尝试使用create-react-app 做一些相当简单的事情，从前端的其他地方动态请求 JSON 文件。当我请求 URL 时，Webpack 只返回应用程序的 index 页面（带有 HTTP 200）。

我尝试将 JSON 文件放在 src 和 public 目录中，但没有任何区别（例如，/src/data/stuff.json、/public/data/stuff.json）。

我猜是 webpack / 有什么东西阻止了请求通过。

像fetch('http://localhost:3000/public/data/stuff.json') 这样的东西是行不通的。我看到了请求，但响应只是默认的 HTML。

当然，http://localhost:3000/src/data/stuff.json 或 http://localhost:3000/data/stuff.json 都不行。

我是动态获取而不是导入，因为我只想要一个 JSON 文件（我相信 webpack 会将它们全部捆绑在应用程序中；更不用说 IRL 文件名是动态的，更接近于 file-{date}.json 并带有大档案）。

绝对会喜欢任何和所有的帮助和建议。谢谢！ :)

【问题讨论】：

标签： javascript json ajax reactjs

【解决方案1】：

create-react-app 使用webpack-dev-server 作为开发服务器。 webpack-dev-server 使用 connect-history-api-fallback 为每个请求提供 index.html 文件（以允许客户端路由）。默认情况下，connect-history-api-fallback 不会覆盖带有点的路径（如/data/stuff.json）。但是，create-react-appdisables this setting。

因此，您需要将 disableDotRule 设置为 false here。您可能需要eject 才能修改此配置。

此设置取决于您使用的服务器，因此当您不使用webpack-dev-server 时，您可能会得到不同的行为。

【讨论】：

顺便说一句，我认为create-react-app 团队会建议您在应用程序中导入 JSON 文件，或者如果数据经常更改，则使用某种单独的数据库。
很高兴知道 - ejecting + 禁用该设置 + 重新启动 webpack 现在显示 404，尽管路径存在。 http://localhost:3000/public/stuff/data-2017-09-24.json -> Cannot GET /public/stuff/data-2017-09-24.json 但是应用程序根目录中的ls-ing 确实显示了文件（./public/stuff/data-2017-09-24.json）
如果文件是/public/data/stuff.json我相信你会用/data/stuff.json访问它
呃 - 成功了！我必须 eject 只是为了在配置中稍微翻转一下，这很臭，但我很感激帮助:)
我之所以要获取而不是导入，是因为这些 json 文件包含大型媒体文件（如 mp3）的索引数据。在运行时将所有媒体文件的所有索引加载到系统中是非常荒谬的，而且我们不能require动态路径（对吗？）。