无法摆脱 missing manifest.json 错误

Can't get rid of missing manifest.json error

我正在 Visual Studio 2017 年构建一个带有 ReactJs 前端的 ASP.NET Core 应用程序。

最近,我开始注意到控制台中缺少 manifest.json 错误 -- 见下文。它似乎不会影响我的应用程序,但我确实想摆脱这个错误。

如果我在 Edge 中查看我的应用程序,我没有看到丢失的 manifest.json 错误,所以这个错误似乎只包含在 Chrome 中。

我将应用程序发布到 Azure,然后在 Chrome 中再次遇到同样的错误,但在 Edge 中没有。

知道我该如何解决吗?

很可能在项目某处引用了 manifest.json,而 file/resource 本身并不存在。

检查您是否有任何 link 标签 rel=manifest 类似于

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

The .webmanifest extension is specified in the Media type registration section of the specification, but browsers generally support manifests with other appropriate extensions like .json.

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

并将其从代码中删除以停止错误。

引用Web App Manifest

manifest.json 文件可能在它应该在的位置。解决方案是在 .json 文件的静态内容部分下的 web.config 文件中添加一个条目。

<?xml version="1.0" encoding="utf-8" ?>
<configuration>
  <system.webServer>
    <staticContent>
      <mimeMap fileExtension=".json" mimeType="application/json" />
  </staticContent>
</system.webServer>
</configuration>

如果您需要添加或编辑您的 web.config 文件,您可以使用 Kudu debug console(将您的应用替换为 link 中您的应用)

您还可以从应用开发工具下的门户启动调试控制台:

如果 manifest.json 文件确实丢失了,您可以按照 Google's instructions for adding a manifest.json file.

进行修复

Chrome 需要网络应用程序清单才能在网络应用程序中启用添加到主屏幕 提示。

在 React 中,您可能会在 public 文件夹中找到 manifest.json,并在 index.html.

中找到此文件的 link

manifest.json 提供在用户的移动设备或桌面上安装您的网络应用程序时使用的元数据。参见 https://developers.google.com/web/fundamentals/web-app-manifest/

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

只需添加 crossorigin="use-credentials",它看起来像: <link rel="manifest" href="/site.webmanifest" crossorigin="use-credentials">

对于那些正在寻找但没有合理解决方案的人,请尝试使用不同的浏览器或隐身模式。我对这个文件有一个持续的错误,它是 Chrome 的(垃圾)插件。我在 JS 中经常看到这种情况,这是由于不良的包装或遗留的调试器以及其他违规行为。请注意,JS 是一门非常危险且难懂的语言。

由于在我的案例中将 React 客户端上传到 Google 应用程序引擎后发生了同样的错误,而清单 JSON 存在,更新 app.yaml 挽救了这种情况:

  - url: /(.*\.(js|css|png|jpg|svg|json|ico|txt))$
    secure: always
    static_files: build/
    upload: build/.*\.(js|css|png|jpg|svg|json|ico|txt)$

IIS 也可以通过扩展名来限制文件。检查以确保 .json 未在此处列出!

好的,只需执行以下操作:

简单的替换了调用:

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

来自

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

我遇到了同样的问题,在 Lighthouse 中查找文件 'asset-manifest.json' 时出错。快速的选择是创建一个具有该名称的空文件,这将消除错误。

在我的例子中,使用具有 asp.net 核心和身份的 React,当我将我的整个应用程序设置为需要通过 Startup.cs 进行身份验证时,我开始收到此错误。

services.AddAuthorization(options =>
        {
            options.FallbackPolicy = new AuthorizationPolicyBuilder()
                .RequireAuthenticatedUser()
                .Build();
        });

这导致了明显的语法错误,因为我的 Index.html 像这样引用 manifest.json:

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

在要求对所有页面进行身份验证后,我的应用没有足够的权限访问该文件。

TLDR; 即使您引用的清单文件存在,请确保您有权从您的应用访问它。

在你的主 index.html 中会有这样的代码:

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

将其替换为:

<link rel=“manifest” href="/src/manifest.json">

有同样的问题,我的情况问题不是那么大,最后的信息(background_color": "#ffffff)最后有一个,,这导致了问题......像这样:

{
  "short_name": "React App",
  "name": "Create React App Sample",
  "start_url": ".",
  "display": "standalone",
  "theme_color": "#000000",
  "background_color": "#ffffff",
}