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）
如果在加载页面时已经打开了dev工具，则不会发生HTTP请求。
禁用所有插件后，系统会以隐身方式发送请求。
此消息不会显示在Firefox中，也不会显示在Chrome中的任何其他网页上。
Vue应用程序中没有对HTTP地址的绝对引用。
当我将脚本放在PAUSE上并在刷新后重新打开控制台时，请求发生但我没有进入调试状态。
当我在任何包含“http：//”的请求中添加断点以停止时，断点永远不会被激活。

问题是什么？我怎样才能诊断出这种怪异的行为？

Answer 1

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

在本地构建应用并提供服务。
从代码中删除内容，直到不再出现。
问题的来源似乎是vue-router，但我也看到了一些页面无法加载的奇怪行为。
Google很多。
了解如果要使用HTML5路由提供SPA，许多静态文件托管工具都不合适，尤其是http-server（https://github.com/indexzero/http-server/issues/80）
修复我正在使用的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;。

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

Vue - Chrome Developer Console中的混合内容警告

1 个答案: