google-chrome - Vue - Chrome 开发者控制台中的混合内容警告

Question

我有一个 Vue.js 应用程序正在运行，它会产生以下警告。

Mixed Content: The page at 'https://mypage.com/some/route' was loaded over HTTPS, but requested an insecure resource 'http://mypage.com/some/route'. This request has been blocked; the content must be served over HTTPS.

请求在网络选项卡中可见。然而，这还不是全部。

• 它只在刷新后出现一次。 (F5)
• 它恰好在 Chrome 开发者工具打开时发生。 (F12)
• 如果在加载页面时开发工具已经打开，则不会发生 HTTP 请求。
• 在禁用所有插件的情况下，在隐身模式下，请求仍会发送。
• 该消息不会在 Firefox 或 Chrome 中的任何其他网页中显示。
• 在 Vue 应用程序中没有对 HTTP 地址的绝对引用。
• 当我将脚本置于 PAUSE 状态并在刷新后重新打开控制台时，出现了请求，但我没有进入调试状态。
• 当我添加一个断点以停止任何包含“http://”的请求时，该断点永远不会被激活。

可能是什么问题？我如何诊断这种怪异的行为？

Answer 1

由于似乎没有明显的答案，我采取了以下步骤。

1. 在本地构建应用并提供服务。
2. 从代码中删除一些东西，直到它不再出现。
3. 问题的根源似乎是 vue-router，但我也看到了一些其他页面无法加载的奇怪行为。
4. Google 很多。
5. 发现要使用 HTML5 路由为 SPA 提供服务，许多静态文件托管工具都不适合，特别是 http-server ( https://github.com/indexzero/http-server/issues/80 )
6. 按如下方式修复我使用的 Dockerfile。

Dockerfile

FROM kyma/docker-nginx
COPY dist /var/www
COPY ./dashboard.nginx
/etc/nginx/sites-enabled/default CMD 'nginx'

从基础镜像中复制default nginx 配置，并将try_files $uri $uri/@root; 替换为try_files $uri $uri//index .html;.

这不仅解决了问题，还解决了其他相关的路由问题!