Zenn
😄

Content-Dispositionがundefinedになる不具合を直す

2024/08/26に公開
Laravel
React
tech

Content-Dispositionがundefinedになる不具合を直す

ReactとLaravelでファイルダウンロードを作っていたとき、Content-Dispositionヘッダーがundefinedとなっていてファイル名が取得することができなかった。ネットワークタブにはそのヘッダーは確認できていたが、axiosのresponseではそのヘッダーはundefinedとなっている。

Content-Dispositionヘッダーとは

mozillaより

通常の HTTP レスポンスにおける Content-Disposition レスポンスヘッダーは、コンテンツがブラウザーでインラインで表示されることを求められているか、つまり、ウェブページとして表示するか、ウェブページの一部として表示するか、ダウンロードしてローカルに保存する添付ファイルとするかを示します。

attachment

ダウンロードするべきであることを示す。

filename

値を使用して、ブラウザは「名前をつけて保存」ダイアログを表示。
filename*はRFC 5987で定義されているエンコーディングを使用する
filename*とfilenameが両方存在する場合、filename*が優先される

Content-Disposition: attachment;
                     filename="ファイル名";
                     filename*=UTF-8''URLエンコーディン
グされたファイル名

今回の不具合の原因

ファイルを返すロジックは以下のようなものだった

response()->download(storage_path('app/temp/' . $fileName), $fileName, [
          'Content-Type' => "text/markdown",
          'Content-Disposition' => 'attachment; filename*=UTF-8"'.$fileName .'"',
      ])->deleteFileAfterSend(true);

Access-Control-Expose-Headersその設定ミスで取得できなかった。クライアントからアクセスするにはこのヘッダーに加える必要がある。

response()->download(storage_path('app/temp/' . $fileName), $fileName, [
          'Content-Type' => "text/markdown",
          'Content-Disposition' => 'attachment; filename*=UTF-8"'.$fileName .'"',
+         'Access-Control-Expose-Headers' => 'Content-Disposition'
      ])->deleteFileAfterSend(true);

参考

最後に

間違っていることあればコメントに書いていただけると幸いです。
よろしくお願いいたします。

GitHubで編集を提案

Discussion