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

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);

参考

@card[https://developer.mozilla.org/ja/docs/Web/HTTP/Headers/Content-Disposition]

最後に

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