HAProxy中Early Hint无法生效排查及分路径预加载配置咨询

问题描述 #

尝试在HAProxy中启用Early Hint但未成功，配置如下：

frontend mysite_frontend_ssl
        mode http
        bind *:443 ssl crt /etc/ssl/mysite.com.pem alpn h2,http/1.1
        http-request early-hint Link "<https://static.mysite.com/test.css>; rel=preload; as=style"
        http-request early-hint Link "<https://static.mysite.com/test.js>; rel=preload; as=script"
        option forwardfor
        default_backend mysite_backend

测试环境：Chrome 109（v103起支持Early Hint），HAProxy版本2.5.5（2022年3月发布，HAProxy自2018年起支持Early Hint）。但在DevTools网络面板中看不到Early Hint和预加载内容，且网上相关资料极少，仅能找到2018年发布公告和文档小段说明。

额外问题 #

如何针对不同路径（类似Nginx的location，URL正则匹配）配置不同的预加载链接/Early Hint？是否只需在early-hint后添加if条件？比如首页预加载部分脚本、图片和字体，商品页预加载其他资源。已知Nginx的选择性推送方法在HAProxy前置时实现复杂且跨域无法实现，因此想在HAProxy中实现预加载。

解决方案 #

一、Early Hint不生效的排查方向 #

• 确认HTTP/2连接状态：HAProxy的Early Hint仅支持HTTP/2，需确保Chrome与HAProxy建立的是h2连接。可在Chrome DevTools「网络」面板查看请求的「协议」列，或在HAProxy日志中添加%[ssl_fc_alpn]字段，验证ALPN协商结果是否为h2。
• 检查SSL配置有效性：若证书存在信任问题或配置错误，Chrome可能降级到HTTP/1.1，导致Early Hint失效。可通过openssl s_client -connect yourdomain.com:443 -alpn h2命令验证ALPN协商是否成功。
• 修正配置语法细节：尝试去掉Link值的引号（HAProxy文档示例多不带引号），修改为：

  http-request early-hint Link <https://static.mysite.com/test.css>; rel=preload; as=style
  http-request early-hint Link <https://static.mysite.com/test.js>; rel=preload; as=script
  

• 调整DevTools查看方式：Early Hint触发的预加载请求不会标注为“Early Hint”，而是在资源请求的「发起者」列显示为Preload，且会在主文档响应前加载。可勾选「网络」面板的「预加载」过滤器查看对应资源。
• 验证版本兼容性：部分HAProxy 2.5.x版本可能存在小范围bug，可尝试升级到2.6+版本测试，或查看版本变更日志确认相关修复。

二、针对不同路径配置Early Hint的方法 #

通过HAProxy的acl规则匹配路径，结合if条件即可实现差异化配置，示例如下：

frontend mysite_frontend_ssl
        mode http
        bind *:443 ssl crt /etc/ssl/mysite.com.pem alpn h2,http/1.1
        option forwardfor

        # 匹配首页精确路径
        acl is_home path -i /
        # 匹配以/product/开头的商品页路径（正则匹配）
        acl is_product path_reg ^/product/

        # 首页专属Early Hint
        http-request early-hint Link <https://static.mysite.com/home.css>; rel=preload; as=style if is_home
        http-request early-hint Link <https://static.mysite.com/home.js>; rel=preload; as=script if is_home
        http-request early-hint Link <https://static.mysite.com/logo.png>; rel=preload; as=image if is_home

        # 商品页专属Early Hint
        http-request early-hint Link <https://static.mysite.com/product.css>; rel=preload; as=style if is_product
        http-request early-hint Link <https://static.mysite.com/product.js>; rel=preload; as=script if is_product

        default_backend mysite_backend

• 用path匹配精确路径，path_reg支持正则匹配；
• 加-i参数可实现大小写不敏感匹配；
• 多个acl可组合使用，比如if is_home or is_product，满足复杂场景需求。

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