Can not read content-disposition from resposne header about isomorphic-fetch

[Cherepanov6]

Add the "Access-Control-Expose-Headers" header to response from server. To read from javaScript "content-disposition" header add to response on server this Access-Control-Expose-Headers:Content-Disposition. Then this code will work: response.headers.get('content-disposition')

[malagant]

At least I don't believe that this is an issue of isomorpic-fetch oder fetch either.
We use a rails api backend and solved the issue with this in a cors initializer:

# Be sure to restart your server when you modify this file.

# Avoid CORS issues when API is called from the frontend app.
# Handle Cross-Origin Resource Sharing (CORS) in order to accept cross-origin AJAX requests.

# Read more: https://github.com/cyu/rack-cors

if Rails.env == 'development'
    Rails.application.config.middleware.insert_before 0, Rack::Cors do
      allow do
        origins 'localhost:10020'

        resource '*',
          headers: :any,
          methods: [:get, :post, :put, :patch, :delete, :options, :head],
          expose: [
            'X-Total', 
            'X-Total-Pages', 
            'X-Page', 
            'X-Per-Page', 
            'X-Next-Page', 
            'X-Prev-Page',
            'X-Offset',
            'X-Rdb-Lang'
          ]
      end
    end
end

As you can see, we are exposing explicitly needed headers. And so should you with content-disposition.
Although this is a rails example. You should be able to expose the headers in JavaScript also.

Hope this helps someone.

[wdamianw]

In C# you could do so by writing:
result.Content.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");
At least it worked for me finally.

[jch254]

@malagant you're right! Even if the headers show in Chrome devtools they're not necessarily included in a CORS response. I explicitly exposed the Content-Disposition header server side and all worked. Cheers cheers!

[av1v3k]

I did set the response header mentioned by @Cherepanov6 in Express NodeJS with the below code.

res.setHeader('Access-Control-Expose-Headers','Content-Disposition');

Thanks @Cherepanov6 !

[derekgray23]

I have same issue, can see 'X-Total-Count' in Chrome devtool, but there is no such key in fetch's response headers.

[sharan5am]

If you are using django, you would add this to settings file:
CORS_EXPOSE_HEADERS =[
'content-disposition',
]

[tw-360vier]

Since this is an issue with the browser side implementation (https://github.com/github/fetch) of this package, doesn't this issue belong there?
Also, i think my problems are probably caused by some missing CORS settings:
JakeChampion/fetch#399

[huync94]

Add the "Access-Control-Expose-Headers" header to response from server. To read from javaScript "content-disposition" header add to response on server this Access-Control-Expose-Headers:Content-Disposition. Then this code will work: response.headers.get('content-disposition')

thank you, You saved my day.

[cmloegcmluin]

We are experiencing a similar issue. The response object coming back from fetch is missing headers besides content-type. In our case we are looking for X-Vcap-Request-Id.

we're able to see a number of headers in the network tab of chrome's devtools, but the only one that is available via the headers through this lib is response.headers.get('content-type')

[malagant]

Any news on this? I have the very same problem and I am getting nervous. ;)

[tw-360vier]

I'm having a similar problem: the only headers i can see are: 'cache-control', 'content-type' and 'expires'.
I can see more headers in chrome devtools, too. And i really need to read those hawk headers...

[jch254]

Me too. Seeing the Content-Disposition header in Chrome devtools but response.headers.get('content-disposition') is null :s

[george-norris-salesforce]

Using isomorphic-fetch in Node/Express to request images from third party API (thus can't control certain CORs settings). Is there a way to get a full set of headers from Fetch/third party API? Using Node Request exposes all headers, Fetch does not.

Only headers returned in Fetch are:
cache-control
expires
content-type
content-length

[JoshMcCullough]

No resolution to this yet?! :(

[dhkha2749]

In C# you could do so by writing:
result.Content.Headers.Add("Access-Control-Expose-Headers", "Content-Disposition");
At least it worked for me finally.

Step 1: first just check Content-Disposition in header response
step 2 : .WithExposedHeaders("Content-Disposition") as this in cors access or startup.cs class in a case of Asp.net core
Step 3 : ( blob).name = this.getResponseHeader('content-disposition').match(/filename=(.+);/)[1].replace(/(^")|("$)/g, '');

[kul-swat]

(file gets saved in binary format in the browser. the filename is in the client's Network/header/Content-Disposition, we need to fetch the filename)

In Server-side code:
node js code-
response.setHeader('Access-Control-Expose-Headers','Content-Disposition');
response.download(outputpath,fileName);

In client-side code:
1)appComponent.ts file
import { HttpHeaders } from '@angular/common/http';
this.reportscomponentservice.getReportsDownload(this.myArr).subscribe((event: any) => {
var contentDispositionData= event.headers.get('content-disposition');
let filename = contentDispositionData.split(";")[1].split("=")[1].split('"')[1].trim()
saveAs(event.body, filename);
});
2) service.ts file
import { HttpClient, HttpResponse } from '@angular/common/http';
getReportsDownload(myArr): Observable<HttpResponse> {
console.log('Service Page', myArr);
return this.http.post(PowerSimEndPoints.GET_DOWNLOAD_DATA.PROD, myArr, {
observe: 'response',
responseType: 'blob'
});
}

[f-starace]

Does anybody know how to expose "Content-Disposition" header in Next-js. I tried editing the next.config.js file according to this article but with no luck.

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: true,
  typescript: {
    ignoreBuildErrors: true,
  },
  async headers() {
    const securityHeaders = [
      {
        key: 'X-Content-Type-Options',
        value: 'nosniff'
      },
      // here
      { key: "Access-Control-Expose-Headers", value: "Content-Disposition" },
    ]
    return [
      {
        source: '/:path*', // req path
        headers: securityHeaders
      }
    ]
  }
}