安装 Varnish & hitch 后无法加载已编译的资产 (CSS)

Question

当我在 ubuntu 20.04 服务器上安装 Varnish 7.0.2 版和 hitch 1.7.0 时，

CSS 未加载。

当我停止 Varnish 时加载正常。

也尝试绕过站点，但问题仍然存在：

sub vcl_recv {
   if (req.http.host ~ "(www\.)?(example)\.com") {
     return(pass);
   }
}

注意：VCL文件没有任何变化。

请帮我解决这个问题。

Answer 1

CSS 可能无法加载的原因之一是 混合内容 。请检查您的静态资源是否通过 HTTP 加载，而页面是否通过 HTTPS 加载。

如果是这种情况，您需要确保您的应用程序知道终止的协议。注册 X-Forwarded-Proto header 是实现此目的的一种方法。

使用代理协议

如https://www.varnish-software.com/developers/tutorials/terminate-tls-varnish-hitch/#retrieve-tls-information-with-vmod_proxy, if the communication between Hitch and Varnish happens over the PROXY v2 protocol所述，您可以使用vmod_proxy提取TLS信息并设置X-Forwarded-Proto header。

这将是 VCL 代码：

vcl 4.1;

import proxy;

backend default {
    .host = "127.0.0.1";
    .port = "8080";
}

sub vcl_recv {
    if(!req.http.X-Forwarded-Proto) {
        if (proxy.is_ssl()) {
            set req.http.X-Forwarded-Proto = "https";
        } else {
            set req.http.X-Forwarded-Proto = "http";
        }
    }    
}

确保在您的应用程序中支持 X-Forwarded-Proto

应该支持将发送到您的源应用程序的 X-Forwarded-Proto 请求 header。这意味着您的应用程序应该知道如何检查 header.

该值将为 http 或 https。基于 header 的值，您的应用程序可以使用一致的请求方案生成 URL。这将阻止加载混合内容。