AWS Cloud9 不允许静态 manifest.json 但允许 css 文件答案

【问题标题】：AWS Cloud9 doesn't allow static manifest.json but does allow css fileAWS Cloud9 不允许静态 manifest.json 但允许 css 文件
【发布时间】：2018-10-30 02:41:06
【问题描述】：

我正在 AWS Cloud9 中开发 PWA，但它不允许我的 manifest.json 包含/引用到链接标签中。它在开发工具中显示“VFS 连接不存在”，就好像它无法找到清单一样，因为它在应用程序外部。我在控制台中收到 499 错误。如果我停止节点 http-server 并重新加载预览页面，这与我收到的消息相同，因为它没有在端口 8080 上提供服务。它确实在链接标签中找到了 CSS 文件（在同一个文件夹中） )，是因为它是 rel=manifest，还是出于安全原因或其他原因，它不允许包含 json 文件？有谁知道为什么这个文件不起作用？

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

【问题讨论】：

请显示css工作部分？
CSS 文件的代码是，我知道它可以工作，因为我的样式正在被应用。这就是为什么我怀疑它与 JSON 或安全性有关。我也尝试过权限，这也不是问题。我尝试过使用 manifest.txt，但它不能作为清单文件。
只是为了确认一下，你能不能直接在浏览器中从它的绝对 URL 获取清单文件？
是的，我可以在浏览器中访问manifest.json，并查看其中的内容，但是从html页面中却找不到。我收到 499 错误，它说“VFS 连接不存在”，好像它无法从 cloud9 内部连接到它一样。

标签： json amazon-web-services progressive-web-apps manifest.json aws-cloud9

【解决方案1】：

这是因为对清单文件的请求是在没有使用 cookie/凭据的情况下完成的，但 VFS 代理使用 cookie 来限制对开发预览的访问。本质上 499 & 错误消息实际上意味着 访问被拒绝。

这个问题更笼统地描述了这个问题：Cookies not sent with request for Web App manifest.json

我已确认这适用于 AWS cloud9 和 Google Chrome 78。

<link rel="manifest" href="/manifest.json" crossOrigin="use-credentials">

【讨论】：

我刚刚意识到 crossOrigin 是一个 React 的东西，而在纯 html 中它是 crossorigin。很高兴这对您有所帮助，对我来说这是一个关于清单请求的非常令人兴奋的发现！

【解决方案2】：

这主要是因为现在您的应用程序不能在端口 80 上公开访问，一旦您上线它应该不会有问题。

更新 - 下面的替代方法

您可以将清单 json 内容作为 base64 编码字符串放在 html 本身中。下面是示例清单 json 及其在页面上的链接标记中的实现。

{
  "name": "your app name",
  "gcm_sender_id": "xxxxxxx",
  "gcm_user_visible_only": "true"
}

在 HTML 页面上 -

<link rel="manifest" href="data:application/manifest+json;base64,ewogICJuYW1lIjogInlvdXIgYXBwIG5hbWUiLAogICJnY21fc2VuZGVyX2lkIjogInh4eHh4eHgiLAogICJnY21fdXNlcl92aXNpYmxlX29ubHkiOiAidHJ1ZSIKfQ==">

【讨论】：

这似乎可以解决。谢谢。我仍然不知道为什么会发生最初的问题，但这至少使它可以使用。

【解决方案3】：

根据 MDN Web Docs，链接标签应该是这样的。

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

这是我找到的信息的链接。希望对你有帮助。

https://developer.mozilla.org/en-US/docs/Web/Manifest

PS：我是 StackOverflow 的新手，所以无法评论这个问题，这就是为什么在答案本身中发布一些研究。

【讨论】：

我很感激，但它并不能解决 cloud9 的问题。