フロントエンドとバックエンドの分離プロジェクトのバックエンド設定のレスポンスヘッダーがフロントエンドで取得できない問題を解決する

問題の説明

フロントエンドとバックエンドの分離プロジェクトの開発において、バックエンドがレスポンスヘッダを設定し、フロントエンドがそれを取得できないといった問題が発生しました。
バックエンド設定の応答ヘッダーコードは次のとおりです

response.setHeader("Content-Disposition", "attachment;filename=" + java.net.URLEncoder.encode(fileName,"UTF-8"));

ここに画像の説明を挿入します
ブラウザでは設定された応答ヘッダーContent-Disposition 属性を確認できますが、フロントエンドが受信した応答情報に設定した応答ヘッダーは確認できません< a i =2> 属性。 Content-Disposition

問題が解決しました

フロントエンドとバックエンドが分離されているプロジェクトでは、応答ヘッダーを定義するだけでなく、フロントエンドが取得できるように応答ヘッダーも公開する必要があることがわかりました。デフォルトでは、次のように 6 つの応答ヘッダーのみが外部に公開されます。

Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma

これら 6 つのタイプに加えて、他のレスポンスヘッダーを公開したい場合は、Access-Control-Expose-Headers を通じて設定する必要があります。具体的なコードは次のとおりです

response.addHeader("Access-Control-Expose-Headers", "Content-Disposition");
response.setHeader("Content-Disposition", "attachment;filename=" + java.net.URLEncoder.encode(fileName,"UTF-8"));

設定が成功すると、下の図が表示されます。
ここに画像の説明を挿入します
この時点で、フロントエンドに返される応答情報には、バックエンドによって設定された応答ヘッダーが表示されます。 a>

また、バックエンドでは Content-Disposition に設定しましたが、フロントエンドでは次の方法で取得できません。

let contentDisposition = res.headers['Content-Disposition'];

最後に、ブラウザが大文字Content-Dispositionを小文字content-disposition
に自動的に変換し、変更後に正常に取得できることがわかりました。

let contentDisposition = res.headers['content-disposition'];

ファイルのダウンロードを実装するための具体的なフロントエンドコードとバックエンドコードについては、この記事を参照してください。「Vue+elementui はファイルのパッケージ化とダウンロードを実装します」