为什么我的HTTPS页面加载图片时出现Mixed Content错误？

开发者秀丽提问于 2026-01-30 14:07:34 阅读 41

前端

最近在开发一个电商页面，把网站部署成HTTPS后，发现图片加载失败了。控制台提示：Mixed Content 错误，但图片路径明明写对了啊！

代码是这样写的：

<img src="http://example.com/image.jpg" alt="商品图">

我试过改成相对路径和https协议，但服务器的图片资源暂时只能通过http访问。如果强行用https又会出现证书错误。有没有什么办法能临时解决这个开发中的兼容问题？

现在测试环境用的是本地HTTPS服务器，但后端图片服务还没配置SSL。难道只能等后端支持https吗？或者有什么代理方案能绕过这个安全限制？

安全策略

我来解答赞 8 收藏

反馈

2 条解答

Mc.春晖 Lv1

Mixed Content就是因为你在HTTPS页面里用了HTTP资源。最简单的办法是搭个本地代理，把图片请求转发过去。试试这个Nginx配置：

server {

    listen 443 ssl;

    server_name yourdomain.com;



    location /images/ {

        proxy_pass http://example.com/;

    }

}

然后改图片路径：<img src="https://yourdomain.com/images/image.jpg" alt="商品图"> 应该能用。

2026-02-02 08:11

皇甫宝玲 Lv1

Mixed Content 错误是因为你在 HTTPS 页面里加载了非安全的 HTTP 资源，浏览器直接给你拦住了。你也不想让用户数据被中间人窃听吧？所以这事儿得解决。

如果后端暂时没法支持 HTTPS，你可以用前端代理的方式处理。效率更高的方法是配置一个本地反向代理，让你的服务器帮用户去拿那些 HTTP 图片，然后通过 HTTPS 返回给页面。

比如用 Nginx 做代理，在配置文件里加这么一段：

location /images/ {

    proxy_pass http://example.com/;

}

然后图片路径改成 https://yourdomain.com/images/image.jpg，浏览器就不会报 Mixed Content 了，因为图片看起来像是从你的 HTTPS 服务器加载的。

当然，这个方案只是临时过渡，后端还是得尽快配 SSL，不然一直代理也不是个事。折腾太久的话，性能和维护成本都会慢慢爬上来。

2026-01-30 16:10