web-dev-qa-db-fra.com

Erreur d'extraction Aucun en-tête «Access-Control-Allow-Origin» n'est présent sur la ressource demandée

J'utilise fetch API pour obtenir des données à partir d'autres API, voici mon code:

var result = fetch(ip, {
        method: 'get',
    }).then(response => response.json())
      .then(data => {
        country = data.country_name;
        let lat = data.latitude;
        let lon = data.longitude;                       
        //fetch weather api with the user country
        return fetch(`https://api.darksky.net/forecast/efc76f378da9a5bd8bb366a91ec6f550/${lat},${lon}`);
    })
    .then(response => response.json())
    .then(data => {
        // access the data of the weather api
        console.log(JSON.stringify(data))
    })
    .catch(error => console.log('Request failed', error));

mais je fais face à une erreur dans la console:

Fetch API cannot load https://api.darksky.net/forecast/efc76f378da9a5bd8bb366a91ec6f550/52.3824,4.8995. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

J'ai défini des en-têtes pour la deuxième extraction:

return fetch(`https://api.darksky.net/forecast/efc76f378da9a5bd8bb366a91ec6f550/${lat},${lon}`, {
  mode: 'no-cors',
  header: {
    'Access-Control-Allow-Origin':'*',
  }
});

l'erreur disparaîtra mais console.log(JSON.stringify(data)) n'enregistre rien dans la console et l'extraction ne renvoie aucune valeur. quel est le problème avec mon code?

javascriptfetchfetch-api
8
Mi La

Le problème n'est pas dans votre code JavaScript, il est dans l'API, le serveur ne prend pas en charge la demande Cross Origin, si vous êtes le propriétaire de cette API, vous devez ajouter 'Access-Control-Allow-Origin' en-tête de la réponse avec les origines autorisées (* pour autoriser à partir de n'importe quelle origine). dans certains cas jsonp la demande peut fonctionner.

Remarque: ce problème se produit uniquement lorsque la demande est générée à partir du navigateur

7
Souhail Ben Slimene

Le problème peut être résolu en utilisant l'argument "no-cors" après l'url

fetch(url, {mode: "no-cors"})
2
Chamod Pathirana