Crbug/1173575，非 JS 模块文件已弃用。 chromewebdata/(索引)꞉5305:9:5551答案

【问题标题】：Crbug/1173575, non-JS module files deprecated. chromewebdata/(index)꞉5305:9:5551Crbug/1173575，非 JS 模块文件已弃用。 chromewebdata/(索引)꞉5305:9:5551
【发布时间】：2021-04-21 07:37:43
【问题描述】：

我刚刚创建了一个新项目并第一次使用 F5 或 Ctrl + F5 运行它，Chrome 中的结果是：

无法访问该网站

err_connection_refused

我在断点处检查了“异常捕获”的选项，并显示以下错误。

如果不检查“异常捕获”，则会引发下一个错误：

我尝试从终端运行“ng s -o”，一切正常。该站点在 4200 端口上运行良好，但我喜欢调试。

这是我的 launch.json 文件，默认情况下：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:4200",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

为什么会这样？

【问题讨论】：

crbug/1173575 是对 crbug.com/1173575 的引用，它是 chrome 错误列表的快捷方式
278k 观看次数，55 个赞，41 个回答最多，赞为零，1 个回答 15，次高 5，没有接受的答案。没有一个答案似乎解决了错误消息中描述的问题，而主要是“我改变了一些东西，它消失了”。嗯……
@MikeWise 这似乎是一个浏览器错误，只有谷歌的 Chrome 开发人员才能真正弄清楚这里发生了什么。我们只能猜测。
它对我有用 DetTools > 首选项 > 恢复默认值并重新加载
这种方式对我有用！ 1- 使用 npm start 启动反应应用程序 2- 在 vs 代码中按 F5

标签： javascript angular visual-studio-code

【解决方案1】：

我遇到了同样的问题，问题出在 URL 上，它是 https://localhost:8000; 代替了 http://localhost:8000。

因此请尝试检查您的 URL 和路由。

【讨论】：

谢谢。我抬起头，出于一个奇怪的原因，在从 127.0.0.1:3000 刷新到 127.0.0.1.com:3000 之后，它仍然显示 127.0.0.1:3000。很奇怪。
所以应该是https还是http？从措辞上我无法确定哪个是正确的。

【解决方案2】：

这是一个棘手的问题。有（截至 2022 年 1 月 21 日）275k 视图、55 个赞成票、41 个答案（大多数赞成票为零）的人找到了一个高度具体的解决方案并且没有实际接受的答案这一事实表明它可能是误导性错误消息，当发生不良和意外情况时触发。对我来说，事实证明是这样的。

此错误似乎与 Chrome 或任何已弃用的功能无关。似乎每当无法建立连接时就会发生这种情况。

我在学习 VS Code 的 React 教程时得到了这个。在该教程中，您首先使用npx 创建一个模板，然后使用npm start 运行它。这行得通，我可以看到它正在使用http://localhost:3000 作为浏览器中的 URL。

但是，当我按照教程要求更改代码并设置断点进行调试时，我在 OP 的帖子中遇到了错误，无论是使用 Chrome 还是使用 Edge。

最终经过大量研究，我发现 VS Code 正在创建一个默认的 launch.json 用于调试和填充它，如下所示：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    "version": "0.2.0",
    "configurations": [
        {
            "type": "pwa-chrome",
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

我需要手动将 8080 更改为 3000 以解决问题。

对我来说，关键是配置断点以捕获异常，如 OP 所述（注意 - 您只能使用在最左侧图标菜单中选择的 Debug 图标进行配置）。虽然发出的错误消息仍然是误导性的“折旧”消息，但如果您稍微挖掘一下，您会发现“无法访问该站点”的消息 - 如下所示：

我认为几乎任何导致连接失败的配置问题都会导致此错误。所以防火墙问题、缺少主机程序、错误的配置（比如我的）等等。

祝您在寻找您自己版本的问题答案的过程中好运，希望这对您有所帮助。

【讨论】：

【解决方案3】：

我也遇到了这个问题，列出的解决方案都没有帮助。不过这个问题很容易解决。

只需进入 Chrome 开发者控制台的Network 标签即可。确保连接在No throttling 而不是Offline。

【讨论】：

这是我的解决方案，我不小心将其更改为离线并且无法识别。谢谢！
对我来说 - Chrome 不知何故改变了自己 - 所以花点时间弄清楚
我也遇到过这个问题，但我通过选中No throttling 附近的Disable cache 复选框解决了这个问题。你的解决对我有帮助！谢谢！
这也是我的问题。如果您正在使用 PWA 并且碰巧在应用程序选项卡中更改为离线模式，请注意它不仅会更改应用程序选项卡...

【解决方案4】：

我的服务器没有在本地运行。 :) 启动 localhost 解决了它。

【讨论】：

这个内置调试器不应该为我们这样做吗？
没什么好丢脸的。
这（错误消息）是否会被视为错误？ Crbug/1173575, non-JS module files deprecated 具有误导性，绝对不是指“http://localhost:8000 没有站点”
这也引起了我的注意。我以为启动调试器也会运行npm start，但它没有。

【解决方案5】：

不要使用选项“针对本地主机启动 Chrome” 来启动您的应用程序，而是设置您的应用程序名称以启动 - 已解决。

更多内容请参见附图。

【讨论】：

这与 Visual Studio Code 完美配合，非常感谢
根据您的布局屏幕截图不确定您在哪里选择此选项....通过菜单可以找到哪里？

【解决方案6】：

我遇到了同样的错误，我通过关闭插件解决了这个问题。特别是我一直在使用的CORS 插件。

【讨论】：

我猜是在谷歌浏览器中。
@Peter Mortensen 请告诉我如何禁用 CORS 插件，我在 socketio 聊天应用程序项目中也使用了一些 CORS，但我不知道如何禁用它
@nikki ricks 请告诉我如何禁用 CORS 插件，我在 socketio 聊天应用程序项目中也使用了一些 CORS，但我不知道如何禁用它

【解决方案7】：

在我的情况下，它通过关闭浏览器并重新编译应用程序得到解决。

【讨论】：

这里也一样。我所要做的就是关闭并重新打开 Chrome。
两者都需要吗？还是两者中的一个会做？为什么？为什么不呢？

【解决方案8】：

试试这个：

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "request": "launch",
            "name": "Launch Chrome against localhost",
            "type": "dart"
        }
    ]
}

【讨论】：

这成功了！但是你能解释一下它为什么会起作用吗？

【解决方案9】：

对我来说，问题是 react/next.js 应用程序没有运行。基本上，您必须让应用程序在单独的窗口/终端中运行才能附加调试器。这与从调试控制台本身启动的其他应用程序不同。

【讨论】：

【解决方案10】：

我在调试控制台中显示了类似的消息，问题是本地 Web 服务器已关闭，因此无法访问。我在虚拟机中打开了服务器，应用又开始工作了:-)

【讨论】：

对我来说也一样，我想我刚刚关闭了运行 npm start 的选项卡。

【解决方案11】：

我已经看到了很多解决这个问题的方法，但都没有奏效。

经过一些调试和注释掉代码的许多部分后，我设法找到了问题。

基本上，它发生在后端；不是前端。

有一个无限循环导致响应卡住。解决了这个问题，为我解决了。

【讨论】：

【解决方案12】：

我的应用程序需要在我的 React 应用程序中运行 navigator.geolocation.getCurrentPosition，当然也需要 HTTPS。

// .env.local HTTPS is set to true
HTTPS=true

问题 - 我使用 HTTP 而不是 HTTPS 加载页面。

Error Screenshot

【讨论】：

【解决方案13】：

我能够通过单击“添加配置”并包含我们在 package.json 文件中指定并用于在开发期间运行的命令来运行我的。

【讨论】：

不要发布代码图片。在你的答案上输入它。
如果每个人都可以轻松访问可以从图像中读取文本的软件，那就太酷了。

【解决方案14】：

我在 3 个单独的 Next.js 项目中遇到了这个错误。 Chrome、Chrome Incognito、Firefox 和 Edge 中的相同错误。发生在生产版本 (next build && next start) 和开发服务器 (next dev) 上。在尝试了一些修复后——确保我使用的是 HTTP 而不是 HTTPS、检查端口是否正在使用、删除node_modules 并运行npm install 等等——最终奏效的是重新启动我的计算机...

在此处发布以防有人在使用 Next.js 时遇到此问题 - 希望这会有所帮助，我很想听听导致错误的原因！

【讨论】：

谢谢，@Peter Millspaugh 它对我有用。

【解决方案15】：

我在调试 Angular 应用程序的 vs 代码时遇到了这个问题。可能的原因可能是服务器没有启动并正在监听端口。您可以通过 ng serve --port 手动启动服务器和端口号。另外比较lauch.json 中的 URL 并比较端口号

【讨论】：

【解决方案16】：

就我而言，我有一个 Blazor 解决方案并开始收到 Crbug/1173575, non-JS module files deprecated message，除此之外，我还收到了 Index.html 文件的 404 错误！

原因是我无意中将.Server 项目上的引用移至.Client 项目。该项目在没有参考的情况下编译良好，但我猜 Asp.netCore 对依赖项进行了某种基于反射的分析以动态构建路由图。

在 .Server 项目上恢复对 .Client 项目的引用解决了该问题。

【讨论】：

【解决方案17】：

在我的情况下，它是由 uBlock 起源引起的。在网站上禁用它会立即修复错误。

我还没有看到有人提到这个，所以添加我的答案。

【讨论】：

【解决方案18】：

我遇到了类似的问题。但是，我发现了一个不同的解决方案。仍然值得检查 OP 解决方案中 GitHub 链接中的步骤。

我正在处理的项目是在旧版本中制作的，并且 launch.json URL 有 // 分隔符。替换这些不带分隔符解决了这个问题。

来自

"url":"file:///C://exampleParent//exampleChild//file.txt"

到

 "url":"file:///c:/exampleParent/exampleChild/file.txt"

【讨论】：

【解决方案19】：

当我尝试按照 Chrome Debugging with Angular CLI 上描述的步骤进行操作时，我收到一条消息，指出该库不再受支持，并且有一个指向本文的链接：

Request’s Past, Present and Future #3142

【讨论】：

【解决方案20】：

当我尝试调试 Python 文件时，我在 Visual Studio Code 中遇到了同样的问题。我通过删除以前的 launch.json 文件并为此文件创建一个新文件来解决它。

【讨论】：

【解决方案21】：

我在一个 JavaScript 项目中遇到过类似的情况。但是我没有学过JSON，只是把里面的最后三个命令删掉了删除名称“url”和“webroot”的 JSON 文件。

【讨论】：

【解决方案22】：

检查点（如果您正在使用文件夹/文件）

检查文件夹/文件名
删除特殊字符（文件夹/文件名不允许特殊字符）
仔细调试代码（Java 捕获异常无法捕获这些错误）

【讨论】：

【解决方案23】：

我认为我们应该删除该 URL 中的 cookie：

【讨论】：

【解决方案24】：

打开文件launch.json，将“配置”中“URL”中的端口号更改为直播服务器的端口号。

【讨论】：

【解决方案25】：

在我的情况下，问题是因为端口 4200 被另一个应用程序（Docker）占用。只要我通过在angular.json 文件的serve 部分添加下一个结构将端口更改为4201，问题就解决了。

"options": {
    "port": 4201
}

【讨论】：

【解决方案26】：

这可能对从事跨 iframe 通信的项目的人有用，我在当前的 Web 应用程序中发现了此警告：Crbug/1173575，不推荐使用非 JS 模块文件。

在我的情况下，原因是资源 iframe 来源没有被提供，这意味着 iframe 请求 URL 不可访问。提供资源时，警告消失了。

【讨论】：

【解决方案27】：

删除这两行对我有用。这是一个 Https 错误

   var cors = require('cors');
   app.use(cors());

【讨论】：

【解决方案28】：

为此添加另一个角度。在将我的 Web 服务器设置为使用 MIME 类型 application/javascript 服务 mjs 后，我将我的 JavaScript 模块命名为 .mjs 我得到了错误

'crbug/1173575，非 JS 模块文件已弃用。'

这里的答案都没有帮助。为了修复它，我给出了模块的路径。

来自

<script type="module" src="xxx.mjs"></script>

到

<script type="module" src="./xxx.mjs"></script>

错误消失了。

【讨论】：

【解决方案29】：

在 Visual Studio Code 中，您可以使用“正常”的 Dart&Flutter 运行和调试配置。如果您没有打开模拟器，该应用程序将自动在 Chrome 浏览器中打开。

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "app",
            "request": "launch",
            "type": "dart"
        },
        {
            "name": "app (profile mode)",
            "request": "launch",
            "type": "dart",
            "flutterMode": "profile"
        }
    ]
}

在 VSCode 1.62.3 中使用 Dart 2.14.4 和 Flutter 2.8.0-3.3.pre 测试

【讨论】：

【解决方案30】：

我的问题出在我的 Windows 10 计算机的网络设置上，而不是在浏览器上。我已经在另一台计算机和移动浏览器中尝试了我的 URL，它运行良好。

所以，我通过重置我的网络设置

解决了这个问题

为此，请转到设置 -> 网络和 Internet -> 向下滚动到网络重置

等待 5 分钟，直到它重新启动。

【讨论】：