如何通过Nginx HTTPS反向代理调用FastAPI接口解决混合内容报错

你遇到的Mixed Content报错和Nginx到FastAPI的内部通信协议无关，错误是前端HTTPS页面主动发起了HTTP协议的接口请求导致的浏览器安全拦截。你此前将proxy_pass改为https://fapi_cars出现Bad Gateway的原因是：你的FastAPI容器（fapi_cars）监听的8001端口是普通HTTP服务，没有配置SSL证书，Nginx用HTTPS协议请求HTTP服务自然无法连通。

按优先级依次操作即可：

• 第一步：修改前端代码中的接口请求地址
  检查前端代码里调用/cars相关接口的地址，如果是写死的http://avnav.com/cars开头的地址，全部改为两种写法之一：
  1. 协议相对路径：//avnav.com/cars，自动适配当前页面的协议
  2. 直接写HTTPS地址：https://avnav.com/cars
• 第二步：完善Nginx反向代理配置，传递HTTPS协议信息给后端
  避免FastAPI生成的重定向地址、绝对路径接口返回HTTP协议，修改location /cars配置块，添加代理头：

  location /cars {
      proxy_pass http://fapi_cars;
      proxy_set_header Host avnav.com;
      # 新增以下3行配置
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header X-Forwarded-Host $host;
      proxy_set_header X-Forwarded-Port $server_port;
      include /etc/nginx/conf.d/cors.txt;
      proxy_ssl_session_reuse on;
  }
  

  修改完成后重启Nginx容器生效。
• 第三步：配置FastAPI信任代理
  让FastAPI识别Nginx传递的HTTPS协议头，生成正确的HTTPS前缀的绝对地址，修改FastAPI容器的启动命令，给uvicorn添加信任代理参数：

  uvicorn main:app --host 0.0.0.0 --port 8000 --forwarded-allow-ips "*"
  

  如需更高安全性，可以将*替换为你的Nginx容器的实际IP。

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