POSTでファイルをJavaScriptで強制ダウンロードさせるには

Question

やりたいこと

jpgなどブラウザで直接表示されてしまうファイルをJavaScriptでPOSTで強制ダウンロードさせたい。
大きいデータもあるためストリームさせたく、一度blobで受け取り改めて保存させる方式は避けたい。

/*
POSTで情報受け取り処理
・・・
・・・
*/

$file = './test.jpg';

header('Content-Type: application/force-download');
header('Content-Length: '.filesize($file));
header('Content-Disposition: attachment; filename="sample.jpg"');
readfile($file);

POSTの理由

• リクエスト内容に応じてDL対象ファイルを動的にするため
• 単純な直リン(URLシェア等)を簡単に防ぎたいため

試したこと

HTMLのFORMやハイパーリンク(GET)であれば、期待通りダウンロードが始まりました。
JavaScriptで非同期通信をした場合はバイナリデータをそのまま受け取ってしまいダウンロードが始まりませんでした。
→ Content-Type: application/force-downloadヘッダが無視される

let data = new FormData;

data.append('test1', 'hoge1');
data.append('test2', 'hoge2');

axios.post('/download', data)
  .then((response) => {
    //何も起こらない(レスポンス内容は対象のバイナリデータ)
  })
  .catch((error) => {
    console.log(error);
  })

非同期で該当ヘッダが無視される原因はブラウザのセキュリティでしょうか？
(特にコンソールにエラー類は出ていない)
もしくは手法が違えばご教示お願いいたします。

最終手段としてjsでformを生成してsubmitさせれば実現できるとは思いますが、
あまりスマートではない気がしまして質問させていただきました。

Answer 1

Content-Type: application/force-download

そもそもこれは存在しません。→定義一覧
ブラウザにとっては未知のContent-Typeなので、ファイルとして保存しかやりようがないだけです。（しかもそれもブラウザ依存）

また、JavaScriptで非同期通信をした場合、それを受け取るのもJavaScript側なので、Blobにしない限りファイルとして受け取れません。

できることの一例として、以下が考えられます。

• POSTのAPIをJSから叩き、キーを受け取る。
• そのキーをGETのAPIに投げて、ファイルを受け取る。
  ※このAPIは、例えばJavaScriptからaタグを生成→クリック→削除みたいな手を使って、HTML側から触らせる

この場合、サーバー側では、POSTを叩かれたらキーを発行し、何度もアクセスされないように、キーの有効期限（例えば発行から5分）をつける、キーとファイルの結びつけをする（ファイルが複数あるなら）のように、サーバー側でも実装は必要です。

サーバーの実装が面倒であれば、JSでformを作ってSubmit後削除するのが一番楽だと思います。

Comments

[退会済みユーザー]

存在しないヘッダだったのですね。
慣習的な名称だったとは勉強になりました。

また、POSTでキーを受け取るご提案も採用させていただきます。
ありがとうございました。