J'ai un problème assez courant dans mon application de recette de réaction. Ceci est le code d'erreur. Code d'erreur: mon code pour récupérer (travaillé avec une autre API): p> Qu'est-ce que j'ai essayé: et raccourci le lien - donne la même erreur essentiellement, la récupération fonctionne - voici le lien de travail (simplement le déclencher dans le navigateur ) P>
1) Approche standard - Fetch URL complète - n'a pas fonctionné à
2) Lisez à propos de la configuration du proxy, je n'ai donc ajouté ceci dans package.json code> p>
3) a publié le site de ne pas demander à Localhost - n'a pas fonctionné aussi bien
4) Utilisé {mode: 'no-cors'}} code> - Fetch renvoyé objet vide p> http://recipepuppy.com/api/?i=onions,garlic&q=omelet&p=3
3 Réponses :
essayer console.log (attendre data.json ()) p>
Lorsque vous développez dans localhost, vous devez utiliser un proxy dite Vous pouvez facilement l'utiliser via $ Il vous fournira sur Donc, dans votre application, vous pouvez modifier l'URL de la ressource avec Cors CODE>, comme Ce NPX code> écrire dans une coque p> npx corsproxy code> p> p> P> localhost: 1337 code> Un proxy qui résoudra tout CORS -TYPE Demandes. P> http: // localhost: 1337 / www. metspuppy.com/api/?i=onions,garlic&q=Onions&p=34/Code>. Le serveur vous répondra avec JSON, après avoir utilisé Fetch code> vous devez utilisation
Fetch (opt) .En (res => res.json ()) code> Pour accéder à la réponse du serveur au format JSON! p> const fetchItems = async () => {
const data = await fetch(`http://localhost:1337/www.recipepuppy.com/api/?i=onions,garlic&q=omelet&p=3`).then(data => data.json())
console.log(data);
};
Vous devez modifier Ajoutez ceci à votre webpack.config strong> si vous l'avez configuré manuellement. p> astérisque permet à tous, vous ne pouvez spécifier qu'un ou tout, Reportez-vous à ce lien sur MDN A> P> sur le serveur Backend pour le site Web que vous demandez de vous avoir besoin d'activer Cors, vous pouvez facilement le faire avec le module CORS si vous utilisez un nœud avec Express P> P> Access-Control-Autory-Origin d'origine code> envoyé depuis votre serveur de développement; Je suppose webpack.