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地址。
• 当我将脚本暂停并在刷新后重新打开控制台时，该请求将发生，但我不会进入调试状态。
• 当我添加一个断点以停止包含“http://”的任何请求时，该断点从未被激活。

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

- Jodiug

Answer 1

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

1. 本地构建应用并进行服务。
2. 从代码中删除内容，直到不再出现错误。
3. 问题的源头似乎是vue-router，但我还看到一些其他奇怪的行为，例如页面无法加载。
4. 大量搜索谷歌。
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 / index.html;”替换“try_files $ uri $ uri / @ root;”。这不仅解决了问题，还解决了其他相关的路由问题！

- Jodiug