My api is generating a pdf file and returning it. The headers I receive in postman are...
Content-Type →application/pdf
Content-Length →2099
Content-Disposition →attachment; filename=Ticket_20200409210413358621_Home_3.pdf
Cache-Control →public, max-age=43200
Expires →Fri, 10 Apr 2020 09:04:13 GMT
Access-Control-Allow-Origin →*
And I can save the file contents no problem from postman.
However, when I try to get this in angular there is an issue.
I set the headers like...
setRequestHeaderPDF() {
return new HttpHeaders({
'Authorization': 'Bearer ' + localStorage.getItem('id_token'),
'Content-Type': 'application/pdf',
'Accept': 'application/pdf'
})
}
Then I am trying two different things.
First is with responseType: 'blob'
. This returns the blob no issue. The issue is, as you can see above, the filename is in the response headers. With the blob response I cannot get the headers.
Second I am not setting the responseType and hoping to get it out of the response text/body but that throws the following error
message: "Unexpected token % in JSON at position 0" stack: "SyntaxError: Unexpected token % in JSON at position 0↵ at JSON.parse ()↵ at XMLHttpRequest.l "
So my question is, how can I get a file from an API and have access to the headers and the data?
Update: Turns out it was the authentication proxy that must have been stripping the headers or something. When I bypass that I can get the file now just fine.
Well I found out that if using CORS you have to expose certain headers. The API is in python flask so I added CORS(app, expose_headers=['Content-Disposition', 'x-suggested-filename']
as is answered here How to change downloading name in flask?
In postman I get
Content-Type →application/pdf
Content-Length →2093
Content-Disposition →attachment; filename=Ticket_20200410171501039158_Home_3.pdf
Cache-Control →public, max-age=43200
Expires →Sat, 11 Apr 2020 05:15:01 GMT
x-suggested-filename →Ticket_20200410171501039158_Home_3.pdf
Access-Control-Allow-Origin →*
Access-Control-Expose-Headers →Content-Disposition, x-suggested-filename
Via →1.1 google
Alt-Svc →clear
And in my angular app I switched over to using XMLHttpRequest() for this one.
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('id_token'));
xhr.setRequestHeader('Content-Type', 'application/pdf');
xhr.setRequestHeader('Accept', 'application/pdf');
xhr.responseType = 'blob';
xhr.onload = function (this, event) {
var blob = this.response;
console.log(this.getAllResponseHeaders());
var contentDispo = this.getResponseHeader('Content-Disposition');
var fileName = contentDispo.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/)[1];
saveAs(blob, fileName);
}
xhr.send();
This seems to be working now.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.