Question

Manifest.json在Google Chrome上加载index.html

我正在构建的React App具有一个manifest.json如下，当我第一次使用Create-React-App时创建：

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "icons": [
    {
      "src": "favicon.ico",
      "sizes": "64x64 32x32 24x24 16x16",
      "type": "image/x-icon"
    }
  ],
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff"
}

但是，当我使用AWS-Amplify将网站发布到S3存储桶时，manifest.json会加载我的index.html。第一个index.html响应具有指向我manifest.json的正确标题，如下所示：

<link rel="manifest" href="/manifest.json">

链接到我的清单似乎正确，并且我的网站要求这样做，但只有另一个index.html作为响应。 manifest.json文件与index.html位于同一目录。

在我的本地主机中，manifest.json很好地加载。当我尝试构建它并从build文件夹提供它时，manifest.json也可以很好地加载。此问题仅发生在我们部署的网站中。我已经检查了S3中的部署文件，它看起来与我们的构建文件完全相同，所以我不知道出了什么问题。

我怀疑这可能是Chrome的问题，因为在Firefox和Edge中未请求Manifest.json。但是，这不能解释为什么我的本地主机和本地版本能够在Chrome中成功加载manifest.json。

我希望manifest.json是一个实际的json文件，而不是index.html。

Answer 1

此问题已在 Amplify 中部署的 React 应用程序解决：

Aws-Amplify: manifest.json and env.json loading index.html

主要问题是 SPA 需要服务器端重定向到 index.html，清单应该是这些重定向的例外，

Manifest.json加载index.html

1 个答案: