Error: the resource is interpreted as a Document, but is transmitted using an application of the MIME / pdf type

Question

I send the PDF stream from my server to the client and then display it in the <object> on the client. Here is my code:

server.js

 router.get('/pdf', function * () { var stream = getMyFileStream(); this.set('Content-Type', 'application/pdf'); this.response.body = stream; }); 

client.js

 var objectElement = document.querySelector('object'); fetch('/pdf', request) .then(res => res.blob()) .then(blob => URL.createObjectURL(blob)) .then(url => { objectElement.setAttribute('data', url) objectElement.setAttribute('type', 'application/pdf') }) 

This code works correctly, but the following warning appears on my console:

A resource is interpreted as a Document, but is transferred using an application such as MIME / pdf

Why does he think my resource should be text/html ? If I change the Content-Type header to text/html , this will cause the warning to go away, but this obviously causes a PDF rendering problem. Any help would be appreciated.

Answer 1

In your sample statement, you need to set the type of the header, because there will be a document by default. Since you did not specify the appropriate content, the browser allows you to find out that something is happening, what is happening on the hook.

 // to stop browser complaining use a request object to specify header var request = new Request('/pdf', { headers: new Headers({ 'Content-Type': 'application/pdf' }) }); fetch(request) .then(function() { /* handle response */ }); ... 

Note. This is from my own appraisal research api sampling. I have not used it in anger yet, so this is unverified. I found this site useful https://davidwalsh.name/fetch .

Let me know how you handle.

Answer 2

Most likely, this is due to the fact that there is a redirect from / pdf and / or there is no file extension.

Add an additional header:

 this.set('Content-Disposition', 'attachment; filename=results.pdf');