page.data.json 404 未找到 & componentDidMount() 未在生产中触发答案

【问题标题】：page.data.json 404 not found & componentDidMount() not firing in productionpage.data.json 404 未找到 & componentDidMount() 未在生产中触发
【发布时间】：2019-07-02 19:44:56
【问题描述】：

我有一个 GatsbyJS 站点，但遇到了一个问题，它找不到任何页面数据文件，也没有 componentDidMount() 触发。这只发生在生产环境中，它在本地使用完整版本和gatsby develop 都可以正常工作。

重现步骤

这是我为此创建的演示页面：https://gwhitworth-dev.azurewebsites.net/blog/2019/06/demo/

注意事项

有一个错误指出：Failed to load resource: the server responded with a status of 404 (Not Found) https://gwhitworth-dev.azurewebsites.net/page-data/blog/2019/06/demo/page-data.json
componentDidMount() 没有在本地生产，所以最终我认为这是问题所在，但不知道它是否与 page-data.json 相关

预期结果

图表应该像在本地一样在生产中呈现

实际结果

如果您打开上面的链接，您会看到虽然它在本地渲染，但没有渲染高图。

提前感谢您的帮助。

【问题讨论】：

嗨@gregwhitworth，你使用官方的Highcharts React 包装器吗？你能在一些在线代码编辑器中重现这个问题吗？例如：codesandbox.io/s/highcharts-react-demo-dunhx

标签： reactjs highcharts gatsby react-highcharts

【解决方案1】：

所以这里的问题是 Gatsby 期望 JSON 内容将以 application/json 的 mime 类型出现：

const isJson = contentType && contentType.startsWith(`application/json`)

我的服务器未配置为执行此操作，因此它正在发送 mimetype 为 text/html 的 json 文件，这导致页面数据未加载，因此页面中的组件未呈现。为了解决这个问题，我将它添加到 web.config 文件中（我在 Azure 上，我知道这不会是通用的）：

<staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
    </staticContent>

【讨论】：