web-dev-qa-db-fra.com

Réponse de la poignée - SyntaxError: fin inattendue de l'entrée lors de l'utilisation du mode: 'no-cors'

J'ai essayé un appel d'extraction ReactJS vers une API REST et je souhaite gérer la réponse. L'appel fonctionne, je reçois une réponse, que je peux voir dans Chrome Dev Tools:

function getAllCourses() {
fetch('http://localhost:8080/course', {
    method: 'POST',
    mode: 'no-cors',
    credentials: 'same-Origin',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        objectClass: 'course',
        crud: '2'
    })
}).then(function (response) {
    console.log(response);
    return response.json();

}).catch(function (err) {
    console.log(err)
});
}

Quand j’essaie de gérer la réponse, j’ai reçu une "SyntaxError: fin inattendue d’entrée"

return response.json();

Le fichier console.log ressemble à ceci:

 Console.log(response)

Ma réponse JSON ressemble à ceci, elle est valide, je l’ai vérifiée avec jsonlint:

[
  {
    "0x1": {
      "users": [],
      "lectures": [],
      "owner": "0x2",
      "title": "WWI 14 SEA",
      "description": null,
      "objectClass": "course",
      "id": "course_00001"
    },
    "0x2": {
      "username": "system",
      "lectures": [],
      "course": null,
      "solutions": [],
      "exercises": [],
      "roles": [
        "0x3",
        "0x4",
        "0x5"
      ],
      "objectClass": "user",
      "id": "user_00001"
    },
    "0x3": {
      "roleName": "ROLE_ADMIN",
      "objectClass": "role",
      "id": "role_00001"
    },
    "0x4": {
      "roleName": "ROLE_STUDENT",
      "objectClass": "role",
      "id": "role_00002"
    },
    "0x5": {
      "roleName": "ROLE_DOCENT",
      "objectClass": "role",
      "id": "role_00003"
    }
  }
]
javascriptjsonreactjscorsfetch-api
17
Chilliggo

Vous devez supprimer le paramètre mode: 'no-cors' de votre demande. Ce mode: 'no-cors' est exactement la cause du problème que vous rencontrez.

Une demande mode: 'no-cors' crée le type de réponse opaque. Le fragment de journal de la console dans la question montre clairement cela. Et opaque signifie que votre code JavaScript frontal ne peut pas voir le corps de la réponse ni ses en-têtes.

https://developer.mozilla.org/en-US/docs/Web/API/Request/mode explique:

no-cors - JavaScript ne peut accéder aux propriétés de la Response résultante.

Donc, l’effet de mode: 'no-cors' est essentiellement de dire aux navigateurs, "Ne laissez pas le code JavaScript front-end accéder au corps de la réponse ou aux en-têtes en aucune circonstance."

J'imagine que vous définissez mode: 'no-cors' pour la demande car la réponse de http://localhost:8080/course n'inclut pas l'en-tête de réponse Access-Control-Allow-Origin ou parce que votre navigateur envoie une demande OPTIONS à http://localhost:8080 car votre demande déclenche un CORS preflight .

Mais régler mode: 'no-cors' n'est pas la solution à ces problèmes. La solution est soit de:

38
sideshowbarker

Dans votre then, vous devriez vérifier si la réponse est correcte avant de renvoyer response.json:

.then(function (response) {
    if (!response.ok) {
        return Promise.reject('some reason');
    }

    return response.json();

})

Si vous voulez avoir le message d'erreur dans votre promesse refusée, vous pouvez faire quelque chose comme:

.then(function (response) {
    if (!response.ok) {
       return response.text().then(result => Promise.reject(new Error(result)));
    }

    return response.json();
})
2
Kmaschta

Je sais que cette réponse risque d’être très tardive et d’être résolue, mais j’ai eu le même problème aujourd’hui et j’avais juste besoin d’ajouter un ',' à la fin du hachage des en-têtes et j’ai cessé d’obtenir l’erreur

export function addContacts(formData) {
  return(dispatch) => {
    dispatch({type: 'POSTING_CONTACTS'});
    console.log(formData)
    return fetch(uri, {
      method: 'POST',
      body: JSON.stringify({contact: {name: formData.name, phone_number: formData.phoneNumber}}),
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json'
      },
    })
    .then(response => {
        return response.json()
      }).then(responseJSON => {
        console.log(responseJSON)
        return dispatch({type: 'ADD_CONTACT', payload: responseJSON});
      })
  }
}
1
Temitope Ruth Elodimuor

Copiez simplement le code suivant et collez-le dans votre fichier web.config sous la balise <system.webServer>.

<httpProtocol>  
    <customHeaders>  
     <add name="Access-Control-Allow-Origin" value="*" />  
     <add name="Access-Control-Allow-Headers" value="Content-Type" />  
     <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />  
    </customHeaders>  
  </httpProtocol>
0
Juboraj Sarker

Vous pouvez éviter le problème avec la politique CORS en ajoutant dans l'en-tête de php ou un autre noeud final de serveur la ligne:

<?php
header('Access-Control-Allow-Origin: *');
//or
header('Access-Control-Allow-Origin: http://example.com');

// Reading JSON POST using PHP
$json = file_get_contents('php://input');
$jsonObj = json_decode($json);

// Use $jsonObj
print_r($jsonObj->message);

...
// End php
?>

Le modèle de code de récupération de travail avec la demande POST est:

const data = {
        optPost: 'myAPI',
        message: 'We make a research of fetch'
    };
const endpoint = 'http://example.com/php/phpGetPost.php';

fetch(endpoint, {
    method: 'POST',
    body: JSON.stringify(data)
})
.then((resp) => resp.json())
.then(function(response) {
    console.info('fetch()', response);
    return response;
});
0
Roman