Vue - Chrome 开发者控制台中的混合内容警告
Vue - Mixed content warning in Chrome Developer Console
我启动了一个 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://" 的请求时，断点永远不会被激活。
可能是什么问题？我如何诊断这种怪异的行为？
由于似乎没有明显的答案，我采取了以下步骤。
- 在本地构建应用程序并提供服务。
- 从代码中删除一些东西，直到它不再出现。
- 问题的根源似乎是
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.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://" 的请求时，断点永远不会被激活。
可能是什么问题？我如何诊断这种怪异的行为？
由于似乎没有明显的答案，我采取了以下步骤。
- 在本地构建应用程序并提供服务。
- 从代码中删除一些东西，直到它不再出现。
- 问题的根源似乎是
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;。
这不仅解决了问题，还解决了其他相关的路由问题！