Basic認証のダイアログが表示されずに401エラーになってしまう

Nuxt.jsで作ったWebアプリにBasic認証をかけて検証を行っていたところ、初回アクセス時は認証ダイアログが表示され問題なく表示ができるが、しばらく経ったあとにアクセスすると、ダイアログの表示もなく401エラーになってしまう現象が起きた。

DeveloperToolで確認してみるとServiceWorkerがサーバにアクセスしようとして401エラーになっている事が判明。

Nuxt PWAを導入していたので、対応方法がないか調べてみたところ、nuxt.config.jsに↓を追加すればよいことが分かった。

// nuxt.config.js
{
  manifest: {
    crossorigin: 'use-credentials'
  }
}

これで認証ダイアログが表示さずに401が出ることはなくなった。

参考