モチベーション

• 表題のエラーの解決をする
• 以前も同じエラーに遭遇して結論を出せなったので備忘録を残す
• 記事にするほどのコンテンツでないためスクラップに残す

発生している不具合

• 次のような文字化けpdfがダウンロードされてしまう
• いくつかpdfダウンロードの導線があるが正常にダウンロードできる導線もある

解決策

• 1年くらい前に同じ現象に遭遇していた
• 当時は先方サーバーだったので質問しにくく困っていたが次の記事を参考に解決することができた（BFF使っていたりと全く同じ現象が発生していた）
• 結論としてはaxiosのresponseTypeをarrayBufferにする必要があった

const response = await axios.get(path, {
        responseType: 'arraybuffer'
      })

https://qiita.com/ksh-fthr/items/ba7c80252edad0e7c66c

考察とか

• サーバー側に伺ったところ「バイナリーpdfを返していた」とのこと。
• 「いくつかpdfダウンロードの導線があるが正常にダウンロードできる導線もある」ことだったがこれはサーバー側が「バイナリーpdfを返している導線」と「ダウンロードurlを返す導線」があったからだった。
• 両方ともサーバーが指定しているレスポンスがstringになっており原因特定が遅れた。が過去に同じ事例を知っていたので致命傷ではなかった
• おそらく1年前の案件もレスポンスがバイナリーだったのだと今更思った。先方との関係性を良好に保つために質問しにくい環境は良くないと思った。

今後の対策

• 画像情報周りに関してはサーバーが何を返しているのか要確認（stringだけではわからない）
• 文字化けが発生していたらバイナリーで返しているかもしれないと仮定する