如何在安全网站上找到不可见的混合内容问题？

Question

我在 NGINX 服务器上部署了一个基本的 PWA 应用程序，该应用程序是使用 Vue CLI 创建的。 Vue 路由器没有使用 history 模式，而是选择了 hash 模式。

虽然网站是安全的：

我遇到以下错误，但不确定该如何处理。有人可能已经遇到这样的错误了吗？:

Mixed Content: The page at 'https://example.com/service-worker.js' was loaded over HTTPS, but requested an insecure resource 'http://example.com/'. This request has been blocked; the content must be served over HTTPS.
Fetch API cannot load https://example.com/index.html. Redirect failed.
service-worker.js:1 Uncaught (in promise) TypeError: Failed to fetch

====更新====

以下几行是否会破坏 HTTPS？:

====更新====

只是为了向大家确保，没有 SVG 文件 "http" 元标记导致的 SSL 中断问题。无需更改这些文件。

Answer 1

您不能只将请求从 no secure url 发送到 secure。您可以查看此 mozilla 文档以获取更深入的信息：
https://developer.mozilla.org/en-US/docs/Web/Security/Mixed_content/How_to_fix_website_with_mixed_content.

如何在安全网站上找到不可见的混合内容问题？

How to find invisible Mixed Content issue on secured website?

javascript

https

vue.js

vue-router