3

我有一个 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://”的请求时，断点永远不会被激活。

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

4

1 回答 1

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'

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

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

于 2018-02-07T23:26:27.253 回答