web-dev-qa-db-fra.com

Erreur: ressource interprétée comme un document mais transférée avec le type MIME application/pdf

J'envoie un flux PDF de mon serveur au client, puis je l'affiche PDF dans une balise <object> dans le client. Voici mon 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')
  })

Ce code semble fonctionner correctement, mais l'avertissement suivant s'affiche dans ma console:

Ressource interprétée comme Document mais transférée avec le type MIME application/pdf

Pourquoi pense-t-il que ma ressource devrait être text/html? Si je modifie mon en-tête Content-Type en text/html, l'avertissement disparaît mais le problème de rendu du fichier PDF est évident. Toute aide serait appréciée.

javascriptajaxpdfecmascript-6mime-types
7
saadq

Dans votre instruction fetch, vous devez définir un type d’en-tête, car la valeur par défaut sera document. Puisque vous n'avez pas spécifié le contenu correspondant, le navigateur vous informe que quelque chose de compliqué se produit.

// 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: Ceci est issu de ma propre recherche d'évaluation de l'API Fetch. Je ne l'ai pas encore utilisé dans la colère, cela n'a donc pas été testé. J'ai trouvé ce site utile https://davidwalsh.name/fetch .

Faites-moi savoir comment vous vous en sortez s'il vous plaît.

3
Vanquished Wombat

Cela est probablement dû au fait qu'il existe une redirection à partir de/pdf et/ou qu'il n'y a pas d'extension de fichier. 

Ajoutez cet en-tête supplémentaire: 

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