Chrome 无法使用 Gulp / BrowserSync 打开 localhost:3000答案

【问题标题】：Chrome can't open localhost:3000 with Gulp / BrowserSyncChrome 无法使用 Gulp / BrowserSync 打开 localhost:3000
【发布时间】：2015-11-17 06:03:25
【问题描述】：

出于某种原因，无论我尝试什么，在通过 Gulp 使用 BrowserSync 启动服务器时，Google Chrome 似乎都无法显示 http://localhost:3000（或任何其他指定的端口号）。

在 Firefox 中导航到相同的 URI，表明它可以工作并且 BrowserSync 已连接。

gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: './'
        },
        port: 8080
    });
});

我将上面的端口8080 指定为替代，但即使使用默认的3000 在Chrome 中也不起作用。 Firefox 似乎都可以使用。

我去过：chrome://net-internals/#dns 并清除了主机缓存，重新启动等。没有任何效果。

在 Chrome 中，我只收到消息：ERR_CONNECTION_REFUSED

有什么想法吗？谢谢。

PS - 也适用于 Safari。

【问题讨论】：

会不会是关于 Chrome 的内容安全政策？
@Ursus - 不确定，你能详细说明一下吗？谢谢。
见this question。
@Ursus 这与 Mac 上的 hosts 文件中的默认条目有关。下面回答！
清除主机缓存暂时为我解决了这个问题。如果此修复只是暂时的，我会报告回来，我怀疑它是。

标签： google-chrome gulp browser-sync

【解决方案1】：

如果这对任何人有帮助，我就会发现问题。

通过 BrowserSync 提供的公共 IP 访问该站点有效，但我仍然需要 localhost:3000，因此我进一步调查了 Mac 上的 hosts 文件。

默认情况下，这一行似乎是影响连接的行：

::1    localhost

您所要做的就是将这一行注释掉，一切都会好起来的：

#::1    localhost

希望这对在 Mac 上使用 Gulp 和 BrowserSync 与 Chrome 有类似问题的人有所帮助。

【讨论】：

@thomas 这取决于您使用的操作系统。每台机器都有一个。我建议用谷歌搜索“[ Windows | 上的主机文件在哪里？麦克 | Linux ]' 等，具体取决于与您相关的内容。操作系统版本之间的确切位置有时也会有所不同。在我运行 Yosemite 的 Mac 上，它位于：/private/etc/hosts - 要到达那里，请使用 Finder 中“Go”选项卡下的“Go to folder...”选项。
出于某种原因，这使它可以在我的系统上运行。 /etc/hosts 中的主机文件
这应该刻在 BrowserSync 主页上。为此浪费了一整天。顺便说一句，Linux 在这里

【解决方案2】：

我已经有这个问题好几个星期了！我终于想出了解决这个问题的直接组合： Mac Sierra 10.12.6。

确实，上面分数最高的答案是正确的。但是，我发现我必须在更新我的主机文件后直接刷新我的 DNS 缓存，否则我会继续出现白屏死机 - DNS 缓存是我的问题：/

以下是最终为我解决此问题的步骤：

1. 断开任何现有的 gulp 服务器（在我的情况下，与您尝试代理的服务器关联的 VPN 连接）

2. 在您的“主机”文件中：

改变

::1    localhost

到

#::1    localhost

然后保存该文件

3. 打开“终端”

4. 将其复制/粘贴到终端，然后按 Enter （这些命令会刷新您的 DNS 缓存）

sudo dscacheutil -flushcache;sudo killall -HUP mDNSResponder;

5. 重新连接到 VPN（如果有），重新运行 gulp browsersync 命令

瞧！您应该能够越过白屏和永远旋转的浏览器滚轮。

【讨论】：

【解决方案3】：

我之前也遇到过类似的问题，我尝试了这些组合，有时只是改变路径会有所帮助。

gulp.task('browser-sync',['nodemon'], function() {
    browserSync.init(null, {
       // proxy:"http://localhost:3000"
       //server: "./server/app.js"
       proxy:"localhost:3001"

    });
});

【讨论】：

【解决方案4】：

我已在我的应用中成功使用以下内容。

来自我的gulpfile.js：

gulp.task('browserSync', function() {

  // Browser sync config
  browserSync({
      proxy: 'localhost:3000'
  });

});

希望对你有帮助。

【讨论】：

那里对我来说并不快乐。由于它适用于 Firefox 和 Safari，但不适用于 Chrome，我觉得 Chrome 本身肯定还有更多功能。

【解决方案5】：

在初始化函数中手动设置浏览器属性对我有用。

gulp.task('browserSync', () => {
        browserSync.init({
            server: {
                baseDir: task.dir.base,
                middleware: [
                    webpackDevMiddleware(bundler, {
                        publicPath: webpackConfig.output.publicPath,
                        stats: 'errors-only'
                    })
                  ]
            },
            browser: 'chrome'
        });
    });

我正在运行 Windows 10 x64

【讨论】：