0
votes

Réagir - aller de l'API, erreur de stratégie Cors

J'ai un problème assez courant dans mon application de recette de réaction. Ceci est le code d'erreur. Code d'erreur: xxx pré>

mon code pour récupérer (travaillé avec une autre API): p> xxx pré>

Qu'est-ce que j'ai essayé:
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> xxx pré>

et raccourci le lien - donne la même erreur
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>

essentiellement, la récupération fonctionne - voici le lien de travail (simplement le déclencher dans le navigateur ) P>

http://recipepuppy.com/api/?i=onions,garlic&q=omelet&p=3


0 commentaires

3 Réponses :


0
votes

essayer console.log (attendre data.json ())


0 commentaires

0
votes

Lorsque vous développez dans localhost, vous devez utiliser un proxy dite Cors CODE>, comme Ce

Vous pouvez facilement l'utiliser via NPX code> écrire dans une coque p>

$ npx corsproxy code> p> p> P>

Il vous fournira sur localhost: 1337 code> Un proxy qui résoudra tout CORS -TYPE Demandes. P>

Donc, dans votre application, vous pouvez modifier l'URL de la ressource avec 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);
};


0 commentaires

1
votes

Vous devez modifier Access-Control-Autory-Origin d'origine envoyé depuis votre serveur de développement; Je suppose webpack.

Ajoutez ceci à votre webpack.config si vous l'avez configuré manuellement. xxx

astérisque permet à tous, vous ne pouvez spécifier qu'un ou tout, Reportez-vous à ce lien sur MDN

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


0 commentaires