启用HTTPS证书后Django后端API请求仍失败的原因排查

1. 混合内容错误的核心原因 #

你遇到的Mixed Content错误，本质是前端页面以HTTPS协议加载，但代码里请求的API接口还是HTTP地址——浏览器会严格阻止HTTPS页面发起的不安全HTTP请求，哪怕后端已经配置了HTTPS，只要前端请求地址没改，这个问题就会存在。

解决步骤：

• 修改前端项目中的API基础地址，把http://67.205.161.47:8000改成https://octopus-app-8l8j5.ondigitalocean.app:8000（用域名而非IP，因为你的证书是针对域名签发的，用IP会导致证书不匹配）。

2. 本地无法连接67.205.161.47:8000的常见原因 #

（1）后端服务未监听公网IP #

默认情况下runserver_plus只监听本地回环地址127.0.0.1，外部设备（包括你的本地机器）无法访问。启动服务时必须指定监听所有网卡的IP：

python3 manage.py runserver_plus 0.0.0.0:8000 --cert-file cert.pem --key-file key.pem

（2）服务器防火墙/安全组未开放8000端口 #

DigitalOcean的Droplet默认有防火墙规则，你需要在控制面板中添加入站规则，允许TCP协议的8000端口访问。如果服务器本身启用了ufw防火墙，还要执行：

ufw allow 8000/tcp
ufw reload

（3）证书未包含服务器公网IP #

你生成证书时只指定了域名，没有把服务器的公网IP67.205.161.47加入证书的SAN（主题备用名称）字段，导致用IP请求HTTPS接口时，浏览器会判定证书无效。

解决步骤：
重新生成证书，把IP也加入进去：

mkcert -cert-file cert.pem -key-file key.pem octopus-app-8l8j5.ondigitalocean.app octopus-app-8l8j5 ondigitalocean.app 67.205.161.47

之后重启后端服务。

3. 生产环境注意事项 #

runserver_plus是开发专用服务器，性能和安全性都不适合生产部署。建议改用Gunicorn+Nginx的组合：用Nginx处理HTTPS请求并反向代理到后端的Gunicorn服务，这样更稳定、安全。

内容的提问来源于stack exchange，提问作者codyc4321