fetchで自前でリダイレクトを対応する方法

やりたいこと

fetch でヘッダーに設定していた認証情報が Safari でリダイレクトが発生時に消えてしまうので、自動でリダイレクトをさせないで、手動で認証情報をヘッダーに設定させたいと考えています。

fetch の第二引数の初期化引数になにか設定をしなければいけないのかと思い調べていたところ、

javascript
1const r = await fetch(url, {redirect:'manual'})

と指定すればfetch内で自動リダイレクトが行われず、手動でリダイレクトを行うことができるという記述が見つかったのですが、
実際に redirect: manual と指定して、リダイレクトを行うサンプルが見つからず、手探りで試してみるもうまくいきません。

発生事象

manual設定時にリダイレクトが起きるとurlにリダイレクト先のURLが設定されているResponseが渡されるのですが、そのurlプロパティにはリダイレクト先のurlではなく、リダイレクト前のアクセスurlが設定されていて、リダイレクト先が取得できません。

また、うまくリダイレクトが停止されていないようで、ブラウザ(Chrome)のネットワークログには アクセスをキャンセルしました のようなログが残っています。

再現コード

具体的には下記のようなコードを試しています。

javascript
1const fetchOption = {
2  headers: {
3    Authentication: "bearer XXXXXXXXXXXXXXXXXXXXXXXX",
4  },
5  redirect: 'manual',
6}
7
8function handleRedirect(r) {
9  if (r.type == 'opaqueredirect') {
10    // リダイレクトの時は opaqueredirect になる。リダイレクト先は url に入っている（はず）
11    return fetch(r.url, fetchOption)
12  } else {
13    return r
14  }
15}
16
17fetch(url, fetchOption)
18  .then(res => handleRedirect(res))
19  .then(res => res.json())
20  .then(json => console.log(json)

こちら、redirect: 'manual' 指定時に手動でリダイレクトを行う方法についてご存じの方がいらっしゃったらご教授お願いいたします。

yambejp

2019/11/05 10:42 編集

> Safari でリダイレクトが発生時に消えてしまうの状況がよくわかりません具体的にどうリダイレクトして、何がきえるのでしょうか？また現象はげSafariのみで確認できるのでしょうか？

nicht-sein

2019/11/05 10:50

再現コードの通り、ヘッダーにAuthenticationを付加しているのですが、リダイレクト後のアドレスにアクセスする際の、リクエストヘッダーにはAuthenticationが存在せず、認証エラーとなっています。現象はMacとiPhoneのSafariのみで発生しており、ChromeやFirefoxでは問題なくリダイレクト後のアドレスにもAuthenticationヘッダーを付与してアクセスしています。 Authenticationヘッダーがなくなっているのはアクセスログ及びデベロッパーツールのネットワークタブから確認しています。