isomorphic-fetch
isomorphic-fetch copied to clipboard
matthew-andrews
Can not read content-disposition from resposne header
I am creating download url at frontend side and server send me data in response body and content-type, content-disposition in response header. i am able to read response.headers.get('content-type') but not response.headers.get('content-disposition'), is response.headers.get('content-disposition') does not supported ?
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')
Any news on this? I have the very same problem and I am getting nervous. ;)
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...
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: https://github.com/github/fetch/issues/399
Me too. Seeing the Content-Disposition header in Chrome devtools but response.headers.get('content-disposition') is null :s
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.
@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!
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
I have same issue, can see 'X-Total-Count' in Chrome devtool, but there is no such key in fetch's response headers.
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')
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.
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.
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 !
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 : (
(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<Blob>> { console.log('Service Page', myArr); return this.http.post(PowerSimEndPoints.GET_DOWNLOAD_DATA.PROD, myArr, { observe: 'response', responseType: 'blob' }); }
If you are using django, you would add this to settings file:
CORS_EXPOSE_HEADERS =[
'content-disposition',
]
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
}
]
}
}
