浏览器同步无法代理 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 的“当前连接”中，并且它们之间也不会复制操作。

也许这与我的浏览器抱怨 https 有关：

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

Answer 1

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

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

According浏览器同步的维护者：

任何像 twitter 这样的大型网站都有多种技术可以 防止这样的代理 - 这是正确的。

Browsersync 是一种用于本地地址的开发工具， 您正在努力 - 在这些情况下，它可以与 HTTPS 一起正常工作 - 您只需要在有关自签名的警告上单击接受 证书:)

Answer 2

您可能需要将 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 3

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

首先，通过在 WSL 中运行 this 或用于 Bash 的任何方式为 localhost 生成 .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/ 与左上角的灰色锁图标一起使用，应该如此。