Question

非常感谢你花时间看看我的小难题。这是我的第一个StackOverflow问题，如果我不小心遗漏了一些重要信息，请原谅我（如果你让我知道的话，我会添加你需要的任何信息）。

我的问题是：我有一个个人开发虚拟机，用于存放我的所有应用程序代码，包括应用程序的服务器。我使用PuTTY连接到我的开发虚拟机，然后将运行 vert.x 应用程序服务器的端口（即7443）转发到我的localhost。因此，当我连接到服务器时，我只需输入：

https://localhost:7443

在我本地计算机上的浏览器的URL栏中。我还使用 Gulp.js 来构建UI组件并观察我的文件以进行更改。目前，gulp watch任务只是重建我链接到index.html文件中的Javascript和CSS包文件，并且每当捆绑包完成重建时我手动重新加载浏览器。我最近在浏览浏览器的实时重载技术时偶然发现了浏览器，它看起来很棒，但我不能让它与我的开发设置一起工作。

这是我的gulp watch任务：

const browserSync = require("browser-sync").create("browser-sync-server");

gulp.task("watch", () => {
    console.info("=== Initializing BrowserSync Server ===");
    browserSync.init({
        proxy: "localhost:7443", // This is my dev server running on port 7443
        open: false // I do not want a new browser to open up when I start BrowserSync
    });

    console.info("=== Listening for changes to reload === ");
    const jsWatcher = gulp.watch(
        myJsFiles,
        { awaitWriteFinish: true },
        ["reload-js"]
    );
    const templateWatcher = gulp.watch(
        myHtmlFiles,
        { awaitWriteFinish: true },
        ["reload-templates"]
    );
    const lessWatcher = gulp.watch(
        myLessFiles,
        { awaitWriteFinish: true },
        ["reload-less"]
    );
});

当我启动监视任务时，在控制台中我看到：

Starting 'watch'...
=== Initializing BrowserSync Server ===
=== Listening for changes to reload ===
Finished 'watch' after 126 ms
[Browsersync] Proxying: http://localhost:7443
[Browsersync] Access URLs:

       Local: http://localhost:3000
    External: http://192.168.1.11:3000

          UI: http://localhost:3001
 UI External: http://192.168.1.11:3001

我还将端口3000和3001转发到我的本地计算机，以便我可以在浏览器中访问这些端点。

我可以通过HTTP在端口3001上很好地访问Browsersync UI，但是当我点击＆＃34; NEW TAB＆＃34;按钮本地下会弹出一个新选项卡，但服务器永远不会加载。它只是旋转和旋转，直到最后我在Chrome中出现错误，表示＆＃34;没有收到数据＆＃34;。有没有人对这个问题有什么想法？我的猜测是，这与我的团队的应用程序使用HTTPS进行浏览器访问这一事实有关，而且Browsersync需要一些进一步的配置才能使用HTTPS，但我不知道如何去做。

非常感谢你帮助我！如果我能向您提供更多信息，请告诉我。

- 汤姆

编辑5/23/18：

我使用openssl为我的开发虚拟机生成localhost密钥和证书文件，并将它们添加到我的gulpfile.js中的BrowserSync配置中。

这是我修改过的配置：

const proxy = require("http-proxy-middleware");

...

browserSync.init({
  ui: {
    port: 8080
  },
  https: {
    key: "./conf/browsersync/localhost.key",
    cert: "./conf/browsersync/localhost.crt",
  },
  server: {
    baseDir: "./",
    index: "index.html"
  },
  middleware: [
    proxy("/api", {
      target: "https://localhost:7443",
      secure: false, // Do not validate SSL certs
      changeOrigin: true, // Seems to be a highly recommended setting
      xfwd: true,
      prependPath: true, // Ensure that the API calls are prepended with the target URL
      logLevel: "debug" // So that I can see verbose console output
    })
  ],
  port: 3000,
  open: false
});

这肯定让我更远，但它仍然不太正确。现在，当我在浏览器中点击https://localhost:3000时，我被带到了我的Web应用程序的索引页面，但没有一个异步API调用得到正确解析。在我运行gulp watch任务的控制台中，我看到HPM（html-proxy-middleware软件）发现了很多错误。这是一个例子：

[HPM] Error occurred while trying to proxy request /api/settings/ from localhost:3000 to https://localhost:7443 (ECONNRESET) (https://nodejs.org/api/errors.html#errors_common_system_errors)

另外，如果我在浏览器窗口中打开https://localhost:3000（BrowserSync会话）的Javascript控制台，我会看到很多504错误（网关超时）。有任何想法吗？再次感谢你的时间。

- 汤姆

Answer 1

首先，我同意，browsersync非常棒。

[Browsersync] Proxying: http://localhost:7443请注意http而不是https。这不行。在您的行proxy: "localhost:7443"中，您没有说明协议。尝试使用https://前缀。您很可能还需要＆＃34; secure：false＆＃34;或者类似的，如果您的开发服务器使用自签名证书。代理必须接受此证书，而不是您的浏览器。

如果您的后端也使用仅安全的Cookie，您也必须在browsersync和客户端使用https，否则您的浏览器将拒绝安全cookie。这是我的工作开发配置（Gruntfile语法）：

var proxy = require('http-proxy-middleware');
[...]
options: {
    port: 3000,
    server: {
        baseDir: './',
        index: '_index.html'
    },
    // redirect all calls to /api to the backend
    https: true,  // required for secure cookie to work
    middleware: [proxy('/api', {
        target: "https://external.backend.server",
        secure: false,  // required if server uses self-signed certificate
        changeOrigin: true,
        xfwd: true  // add X-Forwarded-* headers
    })],
    watchTask: true,
    logConnections: true,
    scrollRestoreTechnique: 'cookie',
    reloadDebounce: 500,
    ghostMode: false
}

远程开发VM上的Browsersync将无法在本地浏览器

编辑5/23/18：

1 个答案: