web-dev-qa-db-fra.com

Comment définir le type de contenu de l'en-tête de la demande lors de l'utilisation de Fetch APi

J'utilise npm 'isomorphic-fetch' pour envoyer des requêtes. Le problème que je rencontre est que je ne peux pas définir le type de contenu de l'en-tête de la demande.

J'ai défini un type de contenu application/json, mais les en-têtes de requête sont définis sur text/plain.

import 'isomorphic-fetch';

  sendRequest(url, method, body) {
    const options = {
      method: method,
      headers:{'content-type': 'application/json'},
      mode: 'no-cors'
    };

    options.body = JSON.stringify(body);

    return fetch(url, options);
  }

Lorsque j'examine la demande dans mon navigateur, le type de contenu est o:

content-type:text/plain;charset=UTF-8

Quelqu'un peut-il expliquer pourquoi je suis incapable de définir cette propriété?

39
user1526912

J'ai trouvé la réponse après avoir lu l'article suivant:

https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Headers

Garde

Étant donné que les en-têtes peuvent être envoyés dans les demandes et reçus en réponses, et ont diverses limitations quant aux informations qui peuvent et doivent être mutables, les objets en-têtes ont une propriété guard. Ceci n'est pas exposé au Web, mais affecte les opérations de mutation autorisées sur l'objet en-tête.

Les valeurs de garde possibles sont:

  • none: par défaut.
  • request: garde d'un objet d'en-tête obtenu à partir d'une requête (Request.headers).
  • request-no-cors: garde d'un objet d'en-tête obtenu à partir d'une requête créée avec Request.modeno-cors.
  • response: garde pour les en-têtes obtenus à partir d'une réponse (Response.headers).
  • immutable: principalement utilisé pour ServiceWorkers; rend un objet en-tête en lecture seule.

Remarque : Vous ne pouvez pas ajouter ou définir un request en-têtes gardés Content-Length entête. De même, insérer Set-Cookie dans un en-tête de réponse n’est pas autorisé: les agents de service ne sont pas autorisés à définir des cookies via des réponses synthétisées.

Lorsque la propriété mode options est définie sur no-cors, les valeurs de l'en-tête de la demande sont immuables.

Au lieu de cela, je règle la propriété mode sur cors.

24
user1526912

Vous devez créer un objet d'extraction d'en-têtes.

sendRequest(url, method, body) {
    const options = {
        method: method,
        headers: new Headers({'content-type': 'application/json'}),
        mode: 'no-cors'
    };

    options.body = JSON.stringify(body);

    return fetch(url, options);
}
21
RTS