无法从 Web 应用程序连接到 localhost:3000

Posted 2023-02-25

【中文标题】无法从 Web 应用程序连接到 localhost:3000

【英文标题】：Failure to connect to localhost:3000 from web application

【发布时间】：2018-06-18 19:16:49

【问题描述】：

我正在编写一些样板代码，以使 VueJS 前端与 Go 驱动的后端一起工作（使用 gorilla/mux 作为路由器）：

目前，我似乎大部分时间都在工作。我正在通过 Go 提供一个静态 html 文件，并用它渲染与 webpack 捆绑的 Vue 东西（目前是 webpack-dev-server，不是物理包），我遇到了一个奇怪的问题：

在我的浏览器中，Firefox 不断告诉我以下信息：

Firefox can’t establish a connection to the server at http://localhost:3000/__webpack_hmr.

然而，当我更改 Vue 组件并保存它们时，它们会在浏览器中自动刷新，正如我所期望的那样。我真的很困惑，我想，我不知道为什么会这样。

我尝试更改我的 Go 服务器运行的端口，但它似乎总是在 http://localhost:<Go Server Port>/__webpack_hmr 处连接失败。

有什么想法吗？也许我遗漏了一个步骤，或者设置比我想象的要复杂。

我是否需要运行 Express 服务器并使用基于 webpack 的中间件来修复此错误？如果是这样，如果我使用 Go 作为后端，这听起来很愚蠢（为什么我要运行两台服务器？）。我做错了吗？

至于 Go 方面，我尝试过在不同的端口上运行 Go 服务器和让 webpack 服务器在不同的端口上运行等等，但它总是无法连接到 http://localhost:<Go Server Port>/__webpack_hmr。

也许设置起来比我想象的要复杂，或者因为它似乎在“工作”，我可以放心地忽略这个错误？我不知道。

【问题讨论】：

感觉好像这是由于 Webpack 假设有一个 ExpressJS 服务器设置了中间件来处理这个问题，我需要类似的东西让 Go 服务器处理 __webpack_hmr 请求，但是没有处理程序，所以也许这就是问题所在？如果是这样，我对如何修复它的想法为零，除非它是我需要 Go 包的东西。

【参考方案1】：

从您的 webpack 配置和代码库中的任何引用中删除 'webpack-hot-middleware/client'。这仅用于热重载，因此删除它是安全的。

由于你需要热重载，你应该使用：https://github.com/go-webpack/webpack

此模块允许与 webpack 正确集成，支持在开发中正确重新加载资产，并支持用于生产缓存的资产哈希。

但是，它们仅显示使用 Gin 和 Iris 的示例，因此您可能需要针对纯粹基于 net/http 的示例打开它们的问题（假设您正在使用该示例）。

【讨论】：

问题是，我想要热重载，我想要 HMR 功能，而我在开发模式下处理这些东西，所以我认为这与我想做的相反.

好的，我认为它的工作令您满意，基于：Maybe this is more complicated to set up than I thought it was, or since it seems to be "working", I can safely ignore this error? I dunno.

【参考方案2】：

如果我正确理解您的问题。您的客户端和服务器使用不同的端口，如果是这种情况，那么您正在使用 CORS（跨源资源共享）请求与客户端-服务器通信。 请参阅以下链接，希望它可以帮助您解决 CORS 问题（对我有很大帮助）

https://github.com/gorilla/handlers https://github.com/rs/cors