Security面板里为什么提示我的HTTPS页面有混合内容？

爱琴 Dev 提问于 2026-03-03 17:44:20 阅读 2

工具

我在本地用 HTTPS 启动了一个开发服务器，页面也确实是通过 https://localhost:3000 加载的，但 Chrome DevTools 的 Security 面板一直报“Mixed Content”警告，说有不安全的资源。可我明明没引用任何 HTTP 资源啊！

唯一引入的外部样式是下面这段 CSS，会不会是字体链接的问题？

@import url('http://fonts.googleapis.com/css2?family=Roboto&display=swap');

body {
  font-family: 'Roboto', sans-serif;
}

我来解答赞 1 收藏

反馈

1 条解答

Mc.雨泽 Lv1

兄弟，你其实已经把罪魁祸首抓出来了，就在你贴的这段 CSS 代码里。仔细看那个 @import 的链接，写的是 http://fonts.googleapis.com。

这就是典型的混合内容问题。虽然你的页面是用 HTTPS 加载的，但这段 CSS 试图通过不安全的 HTTP 协议去拉取字体资源。现在的浏览器安全策略很严，HTTPS 页面里包含 HTTP 资源，就会在 Security 面板报警，甚至直接阻断加载。

解决起来很简单，把那个链接的协议头改成 https 就行。Google 的服务器肯定是支持 HTTPS 的。

修改后的代码如下：

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');



body {

  font-family: 'Roboto', sans-serif;

}

下次写 URL 的时候，尽量用协议相对路径或者直接上 HTTPS，省得后面还得排查这种低级错误。

2026-03-04 03:06