为什么我的HTTPS页面加载时显示Mixed Content错误？

UX栾同提问于 2026-02-15 19:59:29 阅读 35

前端

我在开发一个HTTPS网站时，发现用JavaScript请求HTTP接口会报Mixed Content错误。明明服务器已经配置了SSL证书，为什么还是不行？

比如这个请求代码：


fetch('http://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

控制台直接报错“Mixed Content: The page at ‘https://…’ was loaded over HTTPS, but requested an insecure …”

我试过把服务器nginx配置里的SSL设置重新检查了一遍，证书确实有效。难道必须强制所有请求都用HTTPS吗？有什么办法能临时解决测试环境的问题？

我来解答赞 4 收藏

反馈

1 条解答

❤怡博 Lv1

这个问题我之前也碰到过，确实挺烦人的。简单来说，浏览器现在对HTTPS页面要求很严格，只要页面里有任何HTTP请求，就会报Mixed Content错误，这是为了安全考虑。

你现在的代码里用的是 http://api.example.com/data，虽然是本地测试环境，但浏览器还是会拦截。最直接的解决办法就是把所有接口都改成HTTPS，比如这样：

fetch('https://api.example.com/data')

  .then(response => response.json())

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

如果你在测试环境实在没法用HTTPS，也可以临时修改一下浏览器的行为。比如Chrome可以在启动时加上参数 --unsafely-treat-insecure-origin-as-secure=http://api.example.com，不过这个方法只适合开发调试，千万别用在生产环境。

另外，我还建议你在nginx配置里做个重定向，把HTTP请求自动转到HTTPS，类似这样：

server {

    listen 80;

    server_name api.example.com;

    return 301 https://$host$request_uri;

}

这样一来，就算代码里写的是HTTP，也会被自动跳转到HTTPS，能省不少事。不过最好的做法还是从一开始就统一用HTTPS，避免后续出现各种奇怪的问题。毕竟安全问题不能马虎，尤其是现在浏览器对混合内容查得这么严。

2026-02-16 09:02