如何解决htmx-get的mixed content（混合内容）问题？

问题原因和解决办法： #

• 后端未正确识别HTTPS协议：如果你的应用在Kubernetes后搭配了反向代理（比如Ingress Nginx），后端可能没获取到正确的请求协议，导致HTMX生成HTTP请求。需要让后端读取X-Forwarded-Proto头来判断协议：

  • Django中添加配置：

    SECURE_PROXY_SSL_HEADER = ('HTTP_X_FORWARDED_PROTO', 'https')
    

  • Spring Boot中添加配置：

    server.forward-headers-strategy=framework
    

• 强制HTMX使用HTTPS请求：

  • 修改单个请求：把hx-get="/search/"直接写成hx-get="https://search.example.com/search/"
  • 全局配置更省心：在页面头部添加meta标签，让所有HTMX请求默认使用HTTPS：

    <meta name="htmx-config" content='{"defaultUrlProtocol": "https"}'>
    

• 检查Ingress/反向代理配置：确保Ingress将HTTP请求重定向到HTTPS，并且正确传递X-Forwarded-Proto头。比如Ingress Nginx的配置片段：

  apiVersion: networking.k8s.io/v1
  kind: Ingress
  metadata:
    annotations:
      nginx.ingress.kubernetes.io/ssl-redirect: "true"
      nginx.ingress.kubernetes.io/use-forwarded-headers: "true"
  spec:
    tls:
    - hosts:
      - search.example.com
      secretName: your-tls-secret
    # 剩余服务配置省略
  

• 升级HTMX版本：旧版本可能存在协议识别的bug，升级到最新稳定版尝试解决。

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