HTTP/2 服务器推送资产加载失败 (HTTP2_CLIENT_REFUSED_STREAM)

Posted

技术标签:

【中文标题】HTTP/2 服务器推送资产加载失败 (HTTP2_CLIENT_REFUSED_STREAM)【英文标题】:HTTP/2 server pushed assets fail to load (HTTP2_CLIENT_REFUSED_STREAM) 【发布时间】:2020-05-19 20:07:42 【问题描述】:

对于通过 http2 推送的全部或部分资产,我在 chrome devtools 控制台中出现以下错误 ERR_HTTP2_CLIENT_REFUSED_STREAM

刷新页面并随机清除缓存可部分修复此问题,有时完全修复。

我正在使用启用了 http2(通过 certbot 的 ssl)和 cloudflare 的 nginx

server 
    server_name $HOST;
    root /var/www/$HOST/current/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-XSS-Protection "1; mode=block";
    add_header X-Content-Type-Options "nosniff";

    index index.html index.htm index.php;

    charset utf-8;

    set $auth "dev-Server.";

    if ($request_uri ~ ^/opcache-api/.*$)
    set $auth off;
    

    auth_basic $auth;
    auth_basic_user_file /etc/nginx/.htpasswd;

    location / 
        try_files $uri $uri/ /index.php?$query_string;
    

    location = /favicon.ico  access_log off; log_not_found off; 
    location = /robots.txt   access_log off; log_not_found off; 

    error_page 404 /index.php;

    location ~ \.php$ 
        fastcgi_pass unix:/var/run/php/php7.2-fpm.sock;
        fastcgi_index index.php;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    

    location ~ /\.(?!well-known).* 
        deny all;
    

    location ~* \.(?:css|js)$ 
        access_log off;
        log_not_found off;
        # Let laravel query strings burst the cache
          expires 1M;
          add_header Cache-Control "public";
        # Or force cache revalidation.
          # add_header Cache-Control "public, no-cache, must-revalidate";
    

    location ~* \.(?:jpg|jpeg|gif|png|ico|xml|svg|webp)$ 
        access_log off;
        log_not_found off;
        expires 6M;
        add_header Cache-Control "public";
    

    location ~* \.(?:woff|ttf|otf|woff2|eot)$ 
        access_log        off;
        log_not_found     off;
        expires max;
        add_header Cache-Control "public";
        types     font/opentype otf;
        types     application/vnd.ms-fontobject eot;
        types     font/truetype ttf;
        types     application/font-woff woff;
        types     font/x-woff woff2;
    


    listen 443 ssl http2;
    ssl_certificate /etc/letsencrypt/live/$HOST/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/$HOST/privkey.pem; # managed by Certbot
    # include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_ciphers EECDH+CHACHA20:EECDH+AES128:RSA+AES128:EECDH+AES256:RSA+AES256:EECDH+3DES:RSA+3DES:!MD5;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot


server 
    if ($host = $HOST) 
        return 301 https://$host$request_uri;
     # managed by Certbot


    server_name $HOST;
    listen 80;
    return 404; # managed by Certbot



谷歌搜索此错误不会返回太多结果,如果有帮助,这是一个推送这些资产的 laravel 6 应用程序,如果我在 laravel 中禁用资产推送,那么所有资产都会正确加载。

我什至不知道从哪里开始寻找。


更新 1

我启用了 chrome 日志记录,并按照 here 提供的说明使用 Sawbuck 检查了日志,发现实际错误与 414 HTTP 响应有一定关系,这意味着存在一些缓存问题。


更新 2

我发现这个很棒的 The browser can abort pushed items if it already has them 声明如下:

如果 Chrome 已经在推送缓存中拥有该项目,它将拒绝推送。它用PROTOCOL_ERROR 而不是CANCELREFUSED_STREAM 拒绝。

它还链接到一些 chrome 和 mozilla 错误。

这导致我完全禁用 cloudflare 并直接使用服务器进行测试,我尝试了各种 Cache-Control 指令并尝试禁用标头,但在缓存清除后刷新时出现相同的错误。

显然,chrome 取消了 http/2 推送资产即使在推送缓存中不存在,页面也会损坏。

目前,我在 laravel 应用中禁用 http/2 服务器推送作为临时修复。

【问题讨论】:

【参考方案1】:

我们刚刚遇到了您所描述的完全相同的问题。我们在其中一个 javascript 文件中获得了“net::ERR_HTTP2_CLIENT_REFUSED_STREAM”。重新加载和清除缓存有效,但问题又回来了,似乎是随机的。 Chrome 和 Edge(基于 Chromium)中的相同问题。然后我在 Firefox 中尝试并得到了相同的行为,但 Firefox 抱怨该 url 的响应是“text/html”。我的猜测是,出于某种原因,我们在 Cloudflare 中为该 url 缓存了一个“text/html”响应。当我直接在 Firefox 中打开该 url 时,我得到了“application/javascript”,然后问题就消失了。不过仍然不太清楚这一切是如何发生的。

编辑: 在我们的例子中,结果表明 .js 文件的响应被 401 的服务器阻止了,我们没有发送任何缓存头。 Cloudflare 试图提供帮助,因为浏览器需要一个 .js 文件,因此即使状态为 401,响应也会被缓存。后来其他人失败了,因为我们尝试 http2 将状态为 401 的 text/html 响应推送为 .js 文件. Luckliy Firefox 为我们提供了更好的、可操作的错误消息。

编辑2: 原来这不是 http 标头缓存问题。那是我们对 .js 文件进行了 cookie 身份验证,而且似乎 http2 推送请求并不总是包含 cookie。修复是允许对 .js 文件的无 cookie 请求。

【讨论】:

以上是关于HTTP/2 服务器推送资产加载失败 (HTTP2_CLIENT_REFUSED_STREAM)的主要内容,如果未能解决你的问题,请参考以下文章

Express http 2 服务器推送

HTTP/2 推送 JSON 负载

Jetty HTTP2 服务器推送支持

HTTP 2 将支持服务器推送,这是啥意思?

golang http2 服务器推送的高级客户端

HTTP/2 服务器两次推送资产下载