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

Question

出于某种原因，无论我如何尝试，当通过 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。

Answer 1

我想出了这个问题，如果这对任何人有帮助的话。

通过BrowserSync提供的公共IP访问该网站是可行的，但我仍然需要

localhost:3000

，所以我进一步调查了Mac上的hosts文件。

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

::1    localhost

您所要做的就是注释掉这一行，一切都应该没问题：

#::1    localhost

希望这可以帮助那些在 Mac 上使用 Gulp 和 BrowserSync 与 Chrome 遇到类似问题的人。

Answer 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 命令

瞧！ 您应该能够克服白屏和永远旋转的浏览器轮子。

Answer 3

我以前也遇到过类似的问题，我尝试过这些组合，有时只需更改路径就有帮助。

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

    });
});

Answer 4

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

来自我的

gulpfile.js

：

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

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

});

希望有帮助。

Answer 5

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

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

Answer 6

在 Windows 11 中，我编辑了 Windows/System32/drivers/etc 中的主机文件，将 127.0.0.1 的新映射添加到我的项目外部 URL，现在它可以工作了！

127.0.0.1   www.myname.test
127.0.0.1   myname.test

我正在为 WordPress 使用 tailpress 主题构建器，其中包括浏览器同步支持:) 感谢 michael-giovanni-pumo 为我提供想法

Answer 7

Soo...我尝试了这里提供的所有方法，但没有任何效果。 我只是尝试了一些不同的方法，终于让它发挥作用了

我只是像这样在域名前面设置了一个www

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

    // Browser sync config
    browserSync({
        port:3333,
        proxy: "http://www.name.local",
    });
});