浏览器同步和代客安全

Question

我使用浏览器同步来提供我的本地开发网站。我也在使用 Laravel Valet。当我通过valet securehttps 为开发网站提供服务时，我会收到那些丑陋的 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，如果我忽略 Chrome 隐私错误警告，我可以正常看到该网站。我只是想知道为什么 https 不能正常工作。

如果我https://mysite.dev 在没有浏览器同步:3000端口的情况下访问，它在 Chrome 中工作正常，并在地址栏上显示“安全”

Answer 1

如果您正在使用valet securebrowserSync 并且希望 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 ”。