web-dev-qa-db-fra.com

fetch () fin inattendue de l'entrée

J'utilise fetch () pour récupérer les données du serveur api. Mon erreur ressemble à ceci:

Uncaught (in promise) SyntaxError: Unexpected end of input at 
  fetch.then.blob.

Pouvez-vous s'il vous plaît me dire ce que je fais mal.

const weatherAPi ='https://www.metaweather.com/api/location/523920';
fetch(weatherAPi, {
  mode: 'no-cors'
}).then(blob => blob.json())
  .then(data => console.log(data))
javascriptjsoncorsfetch-api
12
Matt

Une réponse pour la demande no-cors à une ressource d’origine croisée a un type de réponse de 'opaque' . Si vous enregistrez la réponse avant d'essayer de la convertir en JSON, vous verrez un type "opaque".

Les types opaques sont listés comme "sévèrement restreints" .

Une réponse filtrée opaque est une réponse filtrée dont le type est "opaque", url list est la liste vide, status est 0, message de statut est la séquence d'octets vides, la liste d'en-têtes est vide, le corps est null, et la fin est vide.

Ils ne peuvent actuellement pas être lus lorsque le type est opaque.

Une réponse opaque concerne une demande faite pour une ressource sur une origine différente qui ne renvoie pas les en-têtes CORS. Avec une réponse opaque, nous ne serons pas en mesure de lire les données renvoyées ni d’afficher le statut de la demande, ce qui signifie que nous ne pouvons pas vérifier si la demande a abouti ou non. Avec l'implémentation actuelle de fetch (), il est impossible de faire des demandes de ressources sur une étendue globale Origin from différente de la fenêtre.

_ { Voir la documentation de Google sur le type opaque } _.

29
KevBot

J'ai eu le même problème. dans mon cas, le type de réponse «opaque» n'était pas le résultat de la solution… .. Ce code provoquait une erreur avec une réponse vide, car «fetch» ​​n'accepte pas les réponses avec un corps vide:

return fetch(urlToUser, parameters)
.then(response => {
  return response.json()
})
.then((data) => {
  resolve(data)
})
.catch((error) => {
  reject(error)
})

Au lieu de cela, dans mon cas, cela fonctionne mieux:

return fetch(urlToUser, parameters)
.then(response => {
  return response.text()
})
.then((data) => {
  resolve(data ? JSON.parse(data) : {})
})
.catch((error) => {
  reject(error)
})

Obtenir le texte ne donne pas l'erreur même avec le corps vide. Ensuite, vérifiez si les données existent et résolvez . J'espère que cela vous aidera :-)

5
Pibo

Vous devez avoir dans l'en-tête de php ou d'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;
});
2
Roman

Vous avez rencontré le problème de politique de CORS Origin. Pour résoudre ce problème, vous devez disposer de droits pour accéder à l'API côté serveur. En particulier, vous devez ajouter une ligne dans l'en-tête de php ou d'un autre noeud final de serveur:

<?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
?>

Assurez-vous également de ne PAS avoir d’en-tête dans le noeud final de votre serveur:

header("Access-Control-Allow-Credentials" : true);

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