浏览器同步无法代理 https 网站

Question

我使用 browser-sync 2.11.1 和 OS X Chrome 48.0.2564.97（64 位）

当我将它用作 http-website 的代理时：

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

效果很好，我可以将多个浏览器指向 localhost:3000，以便在其中一个浏览器中完成的操作可以在其他浏览器中复制。

然而，当我将它用于 https 网站时：

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

没用。当我将浏览器指向 localhost:3000 时，它们不会出现在浏览器同步 UI 的 "Current Connections" 中，并且它们之间不会复制操作。

可能跟我的浏览器抱怨https有关：

浏览器同步中是否存在错误或者我遗漏了什么？

Answer 1

您可能需要将 https 设置为 true

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

如果这不起作用，请尝试将 https url 附加到 browserSync

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

Answer 2

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

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

According 致浏览器同步的维护者：

any large site like twitter has multiple techniques in place to prevent proxing like this - and rightly so.

Browsersync is a development tool to be used on local addresses that you're working on - in those cases it will work fine with HTTPS - you'll just have to click accept on the warning about self-signed certs :)

Answer 3

如何在使用 BrowserSync 和 xip.io 以及 Wamp

时在 Chrome 中获得安全的灰色锁图标

首先，在 WSL 中通过运行 this 或任何用于 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 告诉 Chome 信任该 .crt 文件：

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

通过单击 ⋮ > 退出完全退出 Chrome（不仅仅是一些选项卡）。

我的 BrowserSync options:

{
    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/ 可以在左上角使用灰色锁图标，这是应该的。

浏览器同步无法代理 https 网站

browser-sync cannot proxy https-websites

https

browser-sync

如何在使用 BrowserSync 和 xip.io 以及 Wamp