APIFlask部署Swagger UI出现Mixed Content错误的解决方法

核心原因 #

你推测的完全正确：预发布环境用HTTPS加载Swagger UI页面，但生成的接口调用地址还是HTTP，浏览器的安全机制拦截了这种混合内容请求。

具体解决方法 #

1. 硬编码/动态配置API服务器地址 #

初始化APIFlask应用时，直接指定HTTPS格式的服务器根地址：

from apiflask import APIFlask

app = APIFlask(__name__, server='https://MYHOST.com')

为了适配多环境，更推荐通过环境变量动态读取，避免代码硬编码：

import os

# 本地环境默认用http，预发布环境通过环境变量传入https地址
app = APIFlask(__name__, server=os.getenv('API_SERVER_URL', 'http://localhost:5000'))

部署预发布环境时，设置环境变量API_SERVER_URL=https://MYHOST.com即可。

2. 开启反向代理协议识别（推荐生产/预发布环境） #

如果应用是通过Nginx、Apache这类反向代理部署的，需要让APIFlask识别代理传递的协议信息：

• 初始化应用时开启trust_proxy：

app = APIFlask(__name__, trust_proxy=True)

• 配置反向代理添加X-Forwarded-Proto头（以Nginx为例）：

location / {
    proxy_pass http://your-app-internal:5000;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header Host $host;
}

这样APIFlask会自动根据代理传递的协议，生成对应HTTPS格式的接口地址。

3. 临时手动修改Swagger UI配置 #

如果上面的配置暂时无法生效，可以临时在Swagger UI页面调整：

• 打开/docs页面，点击顶部的「Servers」下拉框
• 将http://MYHOST.com替换为https://MYHOST.com
• 保存后重新测试接口即可正常调用

验证方式 #

修改配置后重新部署，打开/docs页面，检查所有接口的请求地址是否都为https://开头，确认后再调用接口就不会触发混合内容拦截了。

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