web-dev-qa-db-fra.com

réagir chercher donne un corps de réponse vide

J'ai une application de réaction/redux et j'essaye 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('request failed', 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, alors il manque évidemment quelque chose ici. Si je vérifie l'onglet Réseau dans les outils de développement de Chrome, la demande est faite et je reçois les données que je cherche.

Quelqu'un peut-il faire la lumière sur celui-ci?

MODIFIER:

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); // returns empty string
  return dispatch({
    type: "GET_CALL",
    response: response
  });
})
.catch(error => { console.log('request failed', 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('request failed', error); }); // Syntax error: unexpected end of input

En regardant dans les outils de développement chromés:

 enter image description here

javascriptfetch
35
Razvan Ilin

Je viens de courir dans cela. Comme mentionné dans ce answer , utiliser mode: "no-cors" vous donnera un opaque response, qui ne semble pas renvoyer de données dans le corps.

opaque: réponse de la demande “no-cors” à la ressource d'origine croisée . sévèrement restreint .

Dans mon cas, j'utilisais Express. Une fois que j’ai installé cors pour Express , que je l’ai configuré et que j'ai retiré mode: "no-cors", une promesse m’a été retournée. Les données de réponse seront dans la promesse, par ex.

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);
    });
  }
});
83
RationalDev

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

De la docs

fetch(url)
  .then(response => response.json())
  .then(json => {
    console.log('parsed json', json) // access json.body here
  })
15
Naisheel Verdhan

Vous devez lire le corps de la réponse:

fetch(url)
  .then(res => res.text()) // Read the body as a string

fetch(url)
  .then(res => res.json()) // Read the body as JSON payload

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
    });
  })
3
Florent
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;
});
1
user10045612

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('request failed', error); });
1
Damien Leroux
fetch("http://localhost:8988/api", {
        //mode: "no-cors",
        method: "GET",
        headers: {
            "Accept": "application/json"
        }
    })
    .then(response => {
        return response.json();
    })
    .then(data => {
        return data;
    })
    .catch(error => {
        return error;
    });

Cela fonctionne pour moi.

0
Ani Thettayil