browser-sync无法代理https网站

Question

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

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

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

它运行良好，我可以将多个浏览器指向localhost：3000，以便在其中一个中完成的操作在其他浏览器中复制。

但是当我将它用于https-website时：

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给browser-sync的维护者：

  

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

     

Browsersync是一种用于本地地址的开发工具   你正在努力 - 在这些情况下它将与HTTPS一起正常工作 -   你只需要点击接受关于自签名的警告   证书：）

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'
});

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 /可以在左上方使用灰色锁定图标。