浏览器同步和代客安全

Question

我正在使用浏览器同步来提供我的本地开发站点。我还使用Laravel Valet。当我使用valet secure通过https服务开发站点时，我得到了那些难看的Chrome浏览器隐私错误页面。有没有办法阻止这种情况？

我的浏览器同步配置如下：

browserSync.init({
        host: "https://mysite.dev",
        proxy: "https://mysite.dev",
        ...

[mysite.dev从一个站点更改到另一个站点，我正在处理很多本地开发站点。

当我运行npm start浏览器同步输出时：

[BS] Proxying: https://mysite.dev
[BS] Access URLs:
------------------------------------------
      Local: https://localhost:3000
   External: https://https://mysite.dev:3000
 ------------------------------------------
         UI: http://localhost:3001
UI External: http://https:3001

您可以看到它正确映射了URL，并且如果我忽略了Chromes隐私错误警告，则可以看到该网站正常。我只是想知道为什么https无法正常工作。

如果我访问https://mysite.dev 无浏览器同步:3000端口，则该端口在Chrome中可以正常工作，并在地址栏上显示“安全”

Answer 1

如果您使用的是valet secure，并且希望browserSync在您的测试域中正常播放，请使用以下代码段，确保其安全无误：

// At the top of you webpack.mix.js file
const domain = 'yourdomain.test'; // <= EDIT THIS
const homedir = require('os').homedir();

// The mix script:
mix.browserSync({
      proxy: 'https://' + domain,
      host: domain,
      open: 'external',
      https: {
        key: homedir + '/.valet/Certificates/' + domain + '.key',
        cert: homedir + '/.valet/Certificates/' + domain + '.crt',
      },
  })

在npm run watch上，它将使用有效证书加载“ https://yourdomain.test:3000”。