既にブラウザでBasic認証の認証を済ませたページから、 fetch() を使用して同じBasic認証領域内のAPIエンドポイントへリクエストを投げることがあり、どうやったらブラウザが持っているBasic認証情報を一緒に投げられるのか調べたので、そのメモです。

簡単にですが nginx の設定を合わせて載せておきます。

location ^~ / {
    auth_basic "Secret area";
    auth_basic_user_file /etc/nginx/.htpasswd;
}

location ^~ /api/ {
    proxy_pass http://localhost:8080/;
    auth_basic "Secret area";
    auth_basic_user_file /etc/nginx/.htpasswd;
}

やりかた

fetch('/api/hoge', {
    credentials: "same-origin" // このオプションを指定
})
.then(function(response) {
  /* ... */
});

fetch()の第二引数でcredentialsオプションを指定するだけでOKでした。

MDNのドキュメント上では、

credentials: request に使用したい秘密情報: omit、same-origin、include が使用可能です。現在のドメインの Cookie を自動で送るためにはこの設定を指定する必要があります。

と書いていますが、実際にはクッキーの他にBasic認証情報も送信してくれます。
これにより、既にブラウザで認証済みのBasic認証領域にfetch()を使ってリクエストを投げる時でも、Basic認証情報も合わせて送信してくれます。

credentialsに指定できる値は三つあり、

omit：決してクッキーを送信しない。

same-origin：URL が呼び出し元のスクリプトと同一オリジンだった場合のみ、クッキーを送信する。

include：クロスオリジンの呼び出しであっても、常にクッキーを送信する。

MDN Request.credentialsより引用

となっています。

ちなみに IE11 などの古いブラウザはfetch()が使用できないため、それらのブラウザでも使用したい場合は
whatwg-fetch
を使用するとある程度の古いブラウザまで使えるようになります。

参考

GlobalFetch.fetch() (MDN)
Request.credentials (MDN)

fetch() でブラウザが持っているBasic認証情報を送信する

やりかた

参考