Fetch renvoie un corps de réponse vide

Question

J'ai une application react/redux et j'essaie de faire une simple requête GET à un serveur:

fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
}).then((response) => {
  console.log(response.body); // null
  return dispatch({
    type: "GET_CALL",
    response: response
  });
})
.catch(error => { console.log('requete échouée', error); });

Le problème est que le corps de la réponse est vide dans la fonction .then() et je ne sais pas pourquoi. J'ai vérifié des exemples en ligne et il semble que mon code devrait fonctionner, donc je manque évidemment quelque chose ici. La chose, c'est que si je vérifie l'onglet réseau dans les outils de développement de Chrome, la requête est faite et je reçois les données que je recherche.

Est-ce que quelqu'un peut éclairer ma lanterne sur ce point?

EDIT:

J'ai essayé de convertir la réponse.

en utilisant .text():

fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
})
.then(response => response.text())
.then((response) => {
  console.log(response); // retourne une chaîne vide
  return dispatch({
    type: "GET_CALL",
    response: response
  });
})
.catch(error => { console.log('requete échouée', error); });

et avec .json():

fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
})
.then(response => response.json())
.then((response) => {
  console.log(response.body);
  return dispatch({
    type: "GET_CALL",
    response: response.body
  });
})
.catch(error => { console.log('requete échouée', error); }); // Erreur de syntaxe: fin inattendue de l'entrée

En regardant dans les outils de développement de Chrome:

Answer 1

Je viens de tomber là-dessus. Comme mentionné dans cette réponse, utiliser mode: "no-cors" vous donnera une response opaque, qui ne semble pas renvoyer de données dans le corps.

opaque: Réponse pour une requête "no-cors" à une ressource cross-origin. Sévèrement restreinte.

Dans mon cas, j'utilisais Express. Après avoir installé cors pour Express et l'avoir configuré et enlevé mode: "no-cors", j'ai reçu une promesse. Les données de la réponse seront dans la promesse, par exemple.

fetch('http://example.com/api/node', {
  // mode: 'no-cors',
  method: 'GET',
  headers: {
    Accept: 'application/json',
  },
},
).then(response => {
  if (response.ok) {
    response.json().then(json => {
      console.log(json);
    });
  }
});

Answer 2

Vous devrez convertir votre response en json avant de pouvoir accéder à response.body

Depuis la documentation

fetch(url)
  .then(response => response.json())
  .then(json => {
    console.log('json analysé', json) // accéder à json.body ici
  })

Answer 3

Vous devez lire le corps de la réponse :

fetch(url)
  .then(res => res.text()) // Lire le corps comme une chaîne de caractères

fetch(url)
  .then(res => res.json()) // Lire le corps comme une chargeutilisateur JSON

Une fois que vous avez lu le corps, vous pourrez le manipuler :

fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
})
  .then(response => response.json())
  .then(response => {
    return dispatch({
      type: "GET_CALL",
      response: response
    });
  })

Answer 4

fetch("http://localhost:8988/api", {
    method: "GET",
    headers: {
       "Content-Type": "application/json"
    }
})
.then((response) =>response.json());
.then((data) => {
    console.log(data);
})
.catch(error => {
    return error;
});

Answer 5

Essayez d'utiliser response.json():

fetch('http://example.com/api/node', {
  mode: "no-cors",
  method: "GET",
  headers: {
    "Accept": "application/json"
  }
}).then((response) => {
  console.log(response.json()); // null
  return dispatch({
    type: "GET_CALL",
    response: response.json()
  });
})
.catch(error => { console.log('requête échouée', error); });