html - 利用 Nginx 的浏览器缓存，重新加载页面时没有 css

Question

我正在尝试遵循 google pagespeed 建议和利用浏览器缓存。为此，我将以下代码放入我的 nginx.conf 文件的服务器 block 中。

location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
    expires 365d;
}

location ~*  \.(pdf)$ {
    expires 30d;
}

它似乎运行良好，页面速度将我的分数从 87/100 提高到 95/100。但是，当我单击我网站的刷新按钮时，它似乎不再加载 css 文件了？ 缓存不起作用吗？

我得到的错误信息是

Failed to load resource: the server responded with a status of 404 (Not Found)

这是我的整个 nginx.conf 文件

worker_processes 1;

events {

    worker_connections 1024;

}

http {
    include /etc/nginx/mime.types;

    sendfile on;

    gzip              on;
    gzip_http_version 1.0;
    gzip_proxied      any;
    gzip_min_length   500;
    gzip_disable      "MSIE [1-6]\.";
    gzip_types        text/plain text/xml text/css
                  text/comma-separated-values
                  text/javascript
                  application/x-javascript
                  application/atom+xml;

    # Configuration containing list of application servers
    upstream app_servers {

        server 127.0.0.1:8080;
    }

    # Configuration for Nginx
    server {

        # Running port
        listen 80;

        # Settings to serve static files
        location /static/  {

            # Example:
            # root /full/path/to/application/static/file/dir;
            root /var/www/benty-fields/app/;

        }

        location ~*  \.(jpg|jpeg|png|gif|ico|css|js)$ {
            expires 365d;
        }

        location ~*  \.(pdf)$ {
            expires 30d;
        }

        # Serve a static file (ex. favico)
        # outside /static directory
        location = /favico.ico  {

            root /app/favico.ico;

        }

        # Proxy connections to the application servers
        # app_servers
        location / {

            proxy_pass         http://app_servers;
            proxy_redirect     off;
            proxy_set_header   Host $host;
            proxy_set_header   X-Real-IP $remote_addr;
            proxy_set_header   X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header   X-Forwarded-Host $server_name;

        }
    }
}

Answer 1

查看 Fiddler 跟踪或 Chrome 开发工具。

304 表示服务器响应“未修改，使用您的本地缓存”。如果您清除浏览器缓存或执行 Shift + 刷新，您将获得 200 以及文件正文。相反，304 的主体长度为零。