I am attempting to retrieve the Content-Disposition header from a response received via axios from an external API.
Even though I can see the header in Chrome DevTools Network Response, I am unable to access it from the server.
I came across this article discussing exposing the Content-Disposition header through Access-Control-Expose-Headers, but I am uncertain about how to implement it in Nextjs.
I tried modifying the next.config.js file as shown below, following guidance from the Nextjs Documentation page on security headers, but without success
/** @type {import('next').NextConfig} */
module.exports = {
reactStrictMode: true,
async headers() {
// to allow specific headers to appear in requests
// https://nextjs.org/docs/advanced-features/security-headers
const securityHeaders = [
// important
{ key: "Access-Control-Expose-Headers", value: "Content-Disposition" },
]
return [
{
source: '/:path*', // req path
headers: securityHeaders
}
]
}
}
This is the axios call I used for the API:
// lib/utils.js
export async function downloadFile(collectionName: string, documentId: string) {
const res = await axios.get(
`https://api.myapiendpoint.com/file/${collectionName}/${documentId}`
);
console.log(res.headers);
}
Chrome DevTools log: https://i.stack.imgur.com/T9xWH.png
console.log output:
// these are the only headers I receive
{
"content-length": "195687",
"content-type": "text/csv; charset=utf-8",
"last-modified": "Thu, 10 Feb 2022 16:00:05 GMT"
}