React JS Fetch Retourne une réponse vide mais Postman ne le fait pas

Question

J'ai une application React JS qui essaie de se connecter à une API basée sur des jetons (que je suis en train de développer également, en utilisant Laravel 5.5 et Laravel Passport). J'essaie de mettre en œuvre la connexion de base (connexion en utilisant un nom d'utilisateur et un mot de passe, recevoir un jeton du serveur une fois vérifié, utiliser ce jeton pour les requêtes futures).

Le code que j'utilise pour la récupération est ci-dessous:

function loginApi(username, password) {
    return fetch(loginUrl, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            grant_type: 'password',
            client_id: clientId,
            client_secret: clientSecret,
            username: username,
            password: password
        })

   }).then(handleApiErrors)
     .then(response => response.json)
}

Il convient de noter qu'il n'est pas entièrement complet, car j'essaie actuellement simplement de déterminer la réponse que je reçois.

J'ai déjà résolu les problèmes normaux auxquels on est confronté, comme les problèmes de CORS, cependant le problème que je rencontre maintenant est que la réponse de l'API est simplement... vide. Même dans l'onglet Réseau des outils de développement de Chrome, si j'inspecte directement la requête, la réponse est vide.

Cependant, si je fais la même requête exacte avec Postman, les résultats sont exactement ceux que j'attends.

Quel pourrait être le problème ici ? Pourquoi la requête exactement identique donnerait-elle des résultats différents ?

Answer 1

.json est une fonction et doit être invoquée. Essayez..

.then(response => response.json())

Vous retournez actuellement la fonction d'analyse de .json.