Expose Content-Disposition header on NextJS

I'm trying to get the Content-Disposition header in a response from an external API using axios.

Despite the header being present in Chrome DevTools Network Response, I can't seem to have access to that specific header from server.

I found this article talking about exposing the Content-Disposition header through Access-Control-Expose-Headers but I'm not quite sure how to implement it in Nextjs.

I tried editing the next.config.js file like below, by following directions from this Nextjs Documentation page, regarding security headers, but had no luck

/** @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 API call I made using axios:

// 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:

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"
}