Apache反向代理Figma原型（含WebSocket配置）问题排查

第一步：启用必需的Apache模块 #

先确保以下模块已经启用，未开启的话执行命令激活：

a2enmod proxy proxy_http proxy_wstunnel rewrite ssl
systemctl restart apache2

第二步：配置SSL虚拟主机 #

替换配置中的域名和证书路径，将内容写入你的Apache虚拟主机配置文件（比如/etc/apache2/sites-available/your-proxy.conf）：

<VirtualHost *:443>
    ServerName your-proxy-domain.com

    # SSL证书配置
    SSLEngine on
    SSLCertificateFile /path/to/your/certificate.pem
    SSLCertificateKeyFile /path/to/your/private-key.pem
    SSLCertificateChainFile /path/to/your/chain.pem # 按需添加，部分证书需要

    # 传递原始请求头给Figma，避免资源加载异常
    RequestHeader set X-Forwarded-Proto "https"
    RequestHeader set X-Forwarded-Host "%{HTTP_HOST}e"
    RequestHeader set X-Forwarded-For "%{REMOTE_ADDR}e"

    # WebSocket转发规则：匹配Figma的wss连接请求
    RewriteEngine On
    RewriteCond %{HTTP:Upgrade} =websocket [NC]
    RewriteRule ^/(.*) wss://www.figma.com/$1 [P,L]

    # 核心反向代理规则
    ProxyPass / https://www.figma.com/
    ProxyPassReverse / https://www.figma.com/

    # 额外处理Figma的辅助资源路径
    ProxyPass /cdn-cgi/ https://www.figma.com/cdn-cgi/
    ProxyPassReverse /cdn-cgi/ https://www.figma.com/cdn-cgi/

    # 调整超时设置，适配原型页的长连接需求
    ProxyTimeout 3600
    ProxyReadTimeout 3600
    ProxyConnectTimeout 60
</VirtualHost>

关键配置说明 #

• 请求头传递：Figma依赖X-Forwarded-*头判断原始请求的协议和主机，缺失会导致资源跨域或加载失败。
• WebSocket规则：精准匹配Upgrade: websocket请求头，将其转发到Figma的wss服务，解决原型页实时交互的连接问题。
• 超时设置：原型页需要维持长时间的WebSocket连接，调大超时时间避免Apache主动断开连接。

后续排查 #

如果配置后仍有问题，查看Apache错误日志（/var/log/apache2/error.log），重点排查：

• 是否有证书验证错误（Figma的SSL证书是否被Apache信任）
• WebSocket请求是否被正确匹配转发
• 代理连接是否被防火墙或网络策略拦截

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