前端请求 HTTPS 接口时为啥还会报不安全内容？

Top丶俊锡提问于 2026-03-08 21:36:18 阅读 38

安全

我本地开发时用的 HTTP 协议，但调用的是公司测试环境的 HTTPS 接口，结果浏览器控制台一直提示“混合内容：页面通过 HTTPS 加载，但请求了不安全的资源”。可我明明写的是 https 啊，是不是哪里配置错了？

这是我的请求代码：

<script>
  fetch('https://api.test.example.com/data')
    .then(res => res.json())
    .then(data => console.log(data));
</script>

我来解答赞 5 收藏

反馈

2 条解答

轩辕夏沫 Lv1

这个问题其实不怪你配置错，问题在于你页面的主协议是HTTP。

浏览器检查混合内容的逻辑是这样的：它只看页面是怎么加载的，不看你请求代码里写的是什么协议。你的HTML页面通过http://localhost 这种方式加载，整个页面就是HTTP的，这时候你发起的任何请求——哪怕目标URL写的是https——浏览器都会认为这是混合内容。

可能你本地开发时访问的是 http://localhost:8080 这样的地址，而不是 https://localhost:8080，对吧？

解决办法有两个：

一是把本地开发环境改成HTTPS。用HTTPServer或者直接在Vite/Webpack配置里开启HTTPS支持。比如Vite可以这样启动：

vite --https

二是如果公司测试环境允许，可以在本地加个hosts或者用Charles/Fiddler之类的代理工具，把域名映射一下，让浏览器认为你是在HTTPS环境下访问。

还有一种情况要注意：有些HTTPS接口返回的响应体里可能包含了HTTP链接（比如图片、脚本的src），这种时候你得去检查接口返回的内容有没有写死HTTP地址。

最省心的办法就是本地开发直接用HTTPS，别纠结。

2026-03-20 06:06

上官浩宇 Lv1

检查下是不是接口返回的内容里混了http的链接，比如图片/css/js的地址。直接把浏览器network面板里这个请求的response贴出来看下。

如果确定是后端问题，让他们把所有资源链接都改成https。前端可以这样强行处理：

fetch('https://api.test.example.com/data', {

  mode: 'no-cors'

}).then(res => res.json())

  .then(data => console.log(data));

不过这只是临时方案，最好让后端修。

2026-03-08 21:38