浏览器同步无法代理HTTPS网站。

Question

我使用 browser-sync 2.11.1 版本和 OS X Chrome 48.0.2564.97 (64-bit)。

当我将其用作 http-网站的代理时：

browser-sync start --proxy http://example.com

它非常好用，我可以将多个浏览器指向 localhost:3000，这样在其中一个浏览器中执行的操作会在其他浏览器中复制。

但是，当我将其用于 https-网站时：

browser-sync start --proxy https://twitter.com

它不起作用。当我将浏览器指向 localhost:3000 时，它们不会显示在 browser-sync UI 的“当前连接”中，也不会在它们之间复制操作。

也许这与我的浏览器报告 https 错误有关：

browser-sync 是否存在 bug 或者我遗漏了什么？

- wheleph

---

报告了问题：https://github.com/BrowserSync/browser-sync/issues/992 - wheleph

Answer 1

显然，https://twitter.com 只是一个不好的例子。当我尝试 https://about.gitlab.com/ 时，我的浏览器之间的同步确实起作用：

browser-sync start --proxy https://about.gitlab.com/ --logLevel debug

据 browser-sync 的维护者说：

像 twitter 这样的大型网站采用了多种技术来防止这种代理 - 并且做得很对。

Browsersync 是一种开发工具，用于本地地址上的开发 - 在这些情况下，它将与 HTTPS 很好地协同工作 - 你只需要点击接受关于自签名证书的警告即可 :)

- wheleph

Answer 2

您可能需要将https设置为true。

browserSync({
    proxy: "http://example.com/",
    https: true
});

如果不起作用，请尝试将https网址追加到browserSync中。

browserSync.init({
    socket: {
              domain: "https://example.com" //with port if any => localhost:3000
            },
    proxy: 'http://example.com'
});

- Kareem

---

你能提供更多的上下文吗？我应该将这个片段插入到哪个配置文件中？我使用browser-sync作为独立的命令行实用程序。 - wheleph

如果我通过browser-sync start --proxy https://twitter.com/ --https启动它，我仍然看到相同的警告。 - wheleph

控制台没有错误。但是请看我的回答：很可能是因为Twitter只是一个糟糕的例子。 - wheleph

Answer 3

如何在使用BrowserSync、xip.io和Wamp时在Chrome中获得安全的灰色锁图标

首先，在WSL或任何您用于Bash的工具中运行此命令，生成本地主机的.key和.crt文件：

cd /mnt/c/wamp64/certs/
openssl req -x509 -out localhost.crt -keyout localhost.key \
  -newkey rsa:2048 -nodes -sha256 \
  -subj '/CN=localhost' -extensions EXT -config <( \
   printf "[dn]\nCN=localhost\n[req]\ndistinguished_name = dn\n[EXT]\nsubjectAltName=DNS:localhost\nkeyUsage=digitalSignature\nextendedKeyUsage=serverAuth")

使用PowerShell告诉Chrome信任.crt文件的方法如下：

PS C:\wamp64\certs> certutil -addstore -enterprise -f "Root" .\localhost.crt

点击⋮ > 退出完全退出Chrome（不仅是一些标签页）。

我的BrowserSync选项：

{
    proxy: {
        target: "https://myapp.192.168.1.113.xip.io" // Proxy an EXISTING vhost. Browsersync will wrap your vhost with a proxy URL to view your site.
    },
    host: "localhost", //the crt must have been created to match this (probably)
    https: {            //https://browsersync.io/docs/options/#option-https        
        key: "C:\\wamp64\\certs\\localhost.key", 
        cert: "C:\\wamp64\\certs\\localhost.crt"
    },
    port: 3000
}

现在，https://localhost:3000/ 应该会有一个灰色的锁图标显示在左上角了。

- Ryan

---

我简直不敢相信这个还没有得到任何赞。对我来说几乎完美地工作了。唯一的问题是，网站在重建CSS文件后不再自动刷新。更改index.html时的刷新正常。有什么想法吗？ - Karl

@Karl 我不确定。无论这个项目是什么，我已经很久没有碰它了。但当你弄清楚后，我会很好奇听到你的跟进。谢谢！ - Ryan

我的问题原因是愚蠢。是我自己的问题。我将选项设置为仅监视更改。在某个时刻，我添加了一个清理步骤来删除目标文件夹，这意味着CSS文件被创建而不是被更改。我删除了清理步骤，现在一切都好了。 - Karl

@Karl 谢谢你的更新！很高兴一切都顺利。 - Ryan