为啥在 Vagrant box 中运行“share abc123.com”时，我的样式显示在桌面视图上，但没有显示在物理设备上？

Posted 2023-04-18

【中文标题】为啥在 Vagrant box 中运行“share abc123.com”时，我的样式显示在桌面视图上，但没有显示在物理设备上？

【英文标题】：Why are my styles showing up on desktop view but not showing up on a physical device when running "share abc123.com" inside Vagrant box?为什么在 Vagrant box 中运行“share abc123.com”时，我的样式显示在桌面视图上，但没有显示在物理设备上？

【发布时间】：2021-04-16 22:29:16

【问题描述】：

任何人都知道为什么每当我在我的 Vagrabt 框中运行 share abc123.com 时，ngrok URL 不会在物理设备上显示样式，但会在桌面视图上显示样式？我已经将我的 iPhone 连接到我的 Macbook 以检查 Safari 是否显示了我的样式表 - 检查“网络”选项卡时，它们绝对没有出现在检查器中，它完全是空白的。

但是，当我检查控制台时，我看到了这个错误：

[blocked] The page at https://abc123.ngrok.io/ was not allowed to run insecure content from http://abc123.com//comp/public/css/build/views/live/user-validation-live.css?id=000088e99bfda00d3227.

那个双重//是可疑的，也许这就是为什么？但我不确定。

此外，我检查了cd /etc，发现我什至没有nginx 目录。我不认为这可能是个问题，因为样式在桌面视图上按预期显示得非常好。

有人知道会发生什么吗？

【参考方案1】：

你的错误说明了一切

...不允许运行不安全的内容...

如果您更仔细地查看错误，您正在加载https://abc123.ngrok.io/，这是一个安全连接（因为它通过 HTTPS 运行）。

然后该页面尝试从http://abc123.com//comp/public/css/build/views/live/user-validation-live.css?id=000088e99bfda00d3227 加载样式表，这是一个不安全 连接（因为它通过 HTTP 运行）。

修复该资产以通过 HTTPS 加载，它会毫无问题地加载（或至少不会因不安全的连接而被阻止）。

虽然您的资产有一个双重 //，但这实际上不会阻止资产加载，并且与手头的问题无关。