NGINX：缺少静态资源。服务器响应代码 304

Question

我在这里发帖是因为我正在努力解决一个看似简单的问题。设置如下：

• Angular 应用程序使用静态资源（例如字体）。
• 角度应用程序是使用 docker 部署的，其中包括分发文件的 nginx 服务器。
• 整个容器托管在 Openshift 上，并通过“经典”openshift 网络模式进行访问：
  1. Http 调用到达路由（用于入口的 openshift CRD，管理 SSL）。
  2. 呼叫被重定向到服务。
  3. 服务将调用发送到单个 pod（通过 DeploymentConfig 进行管理，这是一个类似于部署的 openshift CRD）。

问题如下： 加载页面时，某些静态资源（特别是字体）不会被加载。浏览器工具的网络选项卡中没有任何http调用的痕迹，并且使用的字体不显示任何内容（用于图标）。

这些字体在 css 文件中被调用（从角度源生成）：

@font-face {
    font-family: FontAwesome;
    src: url(fontawesome-webfont.2b13baa7dd4f54c9.eot?v=4.7.0);
    src: url(fontawesome-webfont.2b13baa7dd4f54c9.eot?#iefix&v=4.7.0) ...;
}

我还注意到我的 nginx 服务器中有一些 304 响应代码：

{"@timestamp": "2024-02-26T10:34:50+01:00","source": { "ip": "" },"http": {"request": { "method": "GET", "line": "GET /fontawesome-webfont.e9955780856cf8aa.woff2?v=4.7.0 HTTP/1.1", "bytes": 1268, "referrer": "https://<base_url>/styles.dc792cbafebe4f47.css" },"response": { "status_code": 304, "bytes": 214 }},"user_agent": { "original": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36 Edg/120.0.0.0" },"processing_time":"0.000"}

因此，我尝试在 nginx 配置中显式设置缓存控制，但没有成功：

location ~* \.(ico|css|js|gif|jpe?g|png|svg|ttf|woff2?|otf)$ {
  add_header Cache-Control "public, max-age=259200";
}

禁用浏览器缓存可以解决该问题，但这不是一个可行的解决方案。

任何帮助将不胜感激。谢谢。

Answer 1

您的设置涉及一个 Angular 应用程序，该应用程序使用字体等静态资源，由 NGINX 提供服务，整个设置被容器化并部署在 OpenShift 上。

Internet
   |
[OpenShift Route]
   | (SSL/TLS)
[OpenShift Service]
   |
[Pod with NGINX + Angular App Container]

304 HTTP 响应代码表示资源尚未被修改，可以从浏览器的缓存中加载。但是，如果资源未加载，并且您看到 304，但没有显示实际内容，则可能是缓存处理方式存在问题，或者 NGINX 中的配置错误。

---

首先，检查您的 NGINX 配置设置以提供静态文件。看起来不错，但您可能还需要确保根或别名指令正确指向静态文件的目录。

server {
    listen 80;
    server_name yourdomain.com;

    location / {
        root /path/to/your/angular/app/dist;
        try_files $uri $uri/ /index.html;
    }

    location ~* \.(ico|css|js|gif|jpe?g|png|svg|ttf|woff2?|otf)$ {
        add_header Cache-Control "public, max-age=259200";
        root /path/to/your/static/files;
    }
}

确保位置块中的

root

或

alias

指令正确指向静态文件在 Docker 容器中的存储位置。

---

然后，查看 NGINX 是否配置为发送字体文件的正确 MIME 类型。 NGINX 需要了解 WOFF 和 WOFF2 字体文件的正确 MIME 类型:

http {
    include       mime.types;
    ...
    types {
        font/woff                 woff;
        font/woff2                woff2;
        ...
    }
    ...
}

---

由于禁用浏览器缓存“解决”了该问题，因此它指向缓存问题。 304 状态代码通常是一个好兆头，表明您的浏览器正确理解何时从缓存和服务器获取资源。但是，如果资源未正确显示，可能是由于浏览器在第一次请求时没有文件的缓存版本或对缓存指令的误解。

为了确保您的浏览器正确缓存和检索静态资源，请考虑向 must-revalidate

 header

添加 Cache-Control 指令。这迫使浏览器重新验证过时的资源，确保它具有最新版本：

location ~* \.(ico|css|js|gif|jpe?g|png|svg|ttf|woff2?|otf)$ {
    add_header Cache-Control "public, max-age=259200, must-revalidate";
}