由于 PWA Service Worker 缓存，Auth 基本 401 页面不提示输入凭据

Question

我在我的开发网站上使用基本身份验证（例如 dev.example.com），我运行遇到了一个问题，即我的网站在我初次访问后没有提示我输入凭据。换句话说，如果我清除浏览器缓存，就会出现提示，我就可以正常登录了。 session 仍然很好，但是在 session 过期并且我自动注销后，系统不会再次提示我输入凭据。

这也意味着，如果我点击 'cancel'，我将再也不会收到提示。

刷新并不能解决问题，我在初次访问后能够查看该站点的唯一方法是每次都使用隐身模式 window，或者清除缓存并刷新页面。

该页面显示默认的 401 nginx 错误页面，响应是实际的 401 错误。

我尝试将 auth_basic 行移动到配置的各个部分，但这似乎没有效果。我没有自定义 401 错误页面，所以我没有指定 error_page 401，这会是个问题吗？

我也发现了这个问题，IE, FireFox, Opera, and Safari don't display BASIC auth prompt on successive 401 responses from server

通过在 headers 上设置 www-authenticate 解决了上述问题，但这是为我定义的。

这可能与配置相关吗？这是我当前的配置：

server {
    server_name dev.MYSITE.com;

    root /srv/dev/MYSITE/current;
    index index.php index.html index.htm;

    location / {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_set_header X-NginX-Proxy true;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_max_temp_file_size 0;
        proxy_pass http://localhost:3010;
        proxy_redirect off;
        proxy_read_timeout 240s;

        # Basic HTTP Auth
        auth_basic "MYSITE Dev Site";
        auth_basic_user_file /etc/nginx/sites-password/MYSITE.htpasswd;
    }


    error_page 500 502 503 504 /50x.html;
    location = /50x.html {

    }

    location ~ /\.ht {
        deny all;
    }

    listen 443 ssl http2; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/dev.MYSITE.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/dev.MYSITE.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    if ($host = dev.MYSITE.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    listen 80;
    server_name dev.MYSITE.com;

    return 404; # managed by Certbot
}

注意：我使用 nginx 作为 Node.js 服务器的反向代理。

编辑：我不确定为什么这会相关，但这是一个支持离线模式的渐进式 Web 应用程序 (PWA)。我刚刚注意到，如果我绕过 Service Worker 的缓存，那么提示会正确显示（在开发工具中绕过 -> 应用程序 -> Service Worker -> 绕过网络）。

更新：看来我的服务人员正在缓存 401 响应并阻止提示。看来我之前找错地方了。

更新 2：现在这看起来像是 "feature"...
https://bugs.chromium.org/p/chromium/issues/detail?id=623464

Answer 1

我建议处理 response.status 值。如果它不是 200 (response.ok) 那么你可能不想缓存它。

我建议运行通过某种 if/else 或 switch/case 逻辑来处理不同的响应状态代码、内容类型、路由等场景

您的应用程序越复杂，Service Worker 缓存就越复杂 :)

由于 PWA Service Worker 缓存，Auth 基本 401 页面不提示输入凭据

Auth basic 401 page does not prompt for credentials due to PWA service worker caching

nginx

basic-authentication

offline-caching

http-status-code-401

progressive-web-apps