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

我有一个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://”的请求上添加断点以停止时，该断点永远不会被激活

---

有什么问题吗？如何诊断这种可怕的行为？

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

在本地构建应用程序并提供服务

删除代码中的内容，直到不再出现

问题的根源似乎是

vue路由器

，但我也看到了一些页面无法加载的其他奇怪行为

谷歌很多

发现要为带有HTML5路由的SPA提供服务，许多静态文件托管工具都不适用，尤其是

http服务器

（）

修复我使用的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使用
尝试使用文件$uri$uri//index.html

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