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

【问题标题】：Unable to load compiled assets (CSS) after installation of Varnish & hitch安装 Varnish & hitch 后无法加载已编译的资产 (CSS)
【发布时间】：2022-02-17 02:06:27
【问题描述】：

当我在 ubuntu 20.04 服务器上安装 Varnish 版本 7.0.2 和挂接 1.7.0 时，CSS 没有加载。

当我停止 Varnish 时，它加载正常。

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

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

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

请帮帮我。

【问题讨论】：

标签： node.js laravel npm yarnpkg varnish

【解决方案1】：

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

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

使用代理协议

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

这将是 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 请求标头。这意味着您的应用程序应该知道如何检查该标头。

该值将是http 或https。根据标头的值，您的应用程序可以使用一致的请求方案生成 URL。这将防止加载混合内容。

【讨论】：

谢谢。我的问题已通过您建议的解决方案解决。