☰

为什么 JS/CSS 会因为混合内容而被拒绝？

tag-icon • tag-icon http https
为什么 JS/CSS 会因为混合内容而被拒绝？

我有一个应用程序（静态网站），它在内部以 HTTP 形式提供服务，但最终用户浏览器的访问通过负载均衡器强制使用 HTTPS：

+-------------------------+  +----------------------------------+
| browser                 |  |load balancer to which            |
| http://www.example.com  |  |www.example.com is resolved       |
| or                     +---> - listens on 80 and 443          |
| https://www.example.com |  | - rewrites http:// into https:// |
|                         |  |                                  |
+-------------------------+  +---------------+------------------+
                                             |
                             +---------------v-------------+
                             |actual server which listens  |
                             |on someip:80                 |
                             |                             |
                             +-----------------------------+

我的网页通过经典条目加载 JavaScript 脚本和 CSS，例如<script src='/script/hello.js'></script>或<link rel="stylesheet" href="/static/main.min.css">

有时会发生这些脚本/CSS 未加载的情况（页面呈现时没有 CSS 和 JS，因此显然不正确）第一次（按 F5 重新加载页面时正常）并且我设法在 Chrome Dev Tools 中捕获了错误：

Mixed Content: The page at 'https://www.example.com/status/' was loaded over HTTPS, but requested an insecure script 'http://www.example.com.com/static/jquery.min.js?ticket=ST-1233778-1feFoRbZPxS0ICdkJeR6-cas'. This request has been blocked; the content must be served over HTTPS.

信息很明确：整体 HTTP年代页面仅包含 HTTP 组件。

我的问题是：为什么它们是 HTTP 而不是 HTTPS？

  • 调用是相对的，因此无论页面是什么，都应附加到相对路径
  • 我认为错误发生在有人通过以下方式进行初始调用时http://（否则不会出现问题）
  • 但在这种情况下，会发生
    • 用户输入内容http://并且该查询离开浏览器...
    • ...到达负载均衡器...
    • ... 将查询转发为http://（因此服务器接收http调用）...
    • ...内容被传回至负载均衡器...
    • 它将调用转换为https://

我不明白混合内容可以在哪里生成，以及为什么这仅适用于第一次调用该页面，通过 F5 刷新即可解决。

答案1

确保基础标签您的页面是基于 HTTPS 的。

该标签指定文档中所有相对 URL 的基本 URL/目标。

相关内容