web-dev-qa-db-fra.com

Comment résoudre le problème CORS dans Fetch API

Je crée une application météo de base uniquement frontale à l'aide de reactjs. Pour les demandes d'API, j'utilise l'API Fetch. Dans mon application, j'obtiens l'emplacement actuel à partir d'un API simple que j'ai trouvé et il donne l'emplacement en tant qu'objet JSON. Mais quand je le demande via Fetch API, j'obtiens cette erreur.

Failed to load http://ip-api.com/json: Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response.

J'ai donc cherché et trouvé plusieurs solutions pour résoudre ce problème.

  1. L'activation de CORS dans Chrome résout l'erreur mais quand je déploie l'application sur heroku, comment puis-je y accéder via un appareil mobile sans rencontrer le même problème CORS.
  2. J'ai trouvé un API proxy qui active les requêtes CORS. Mais comme il s'agit d'une demande de localisation, cela me donne l'emplacement du serveur proxy. Ce n'est donc pas une solution.
  3. Je suis passé par là question Stackoverflow et j'ai ajouté les en-têtes à l'en-tête dans ma demande http mais cela ne résout pas le problème. (Cela donne toujours la même erreur).

Alors, comment puis-je résoudre le problème de façon permanente? Quelle est la meilleure solution que je peux utiliser pour résoudre le problème CORS pour les requêtes http dans Fetch API?

javascriptreactjshttpcorsfetch-api
6
Thidasa Pankaja

Cette API semble être permissive, répondant par Access-Control-Allow-Origin:*

Je n'ai pas compris ce qui cause votre problème, mais je ne pense pas que ce soit simplement le fetch API .

Cela a bien fonctionné pour moi dans Firefox et Chrome ...

fetch('http://ip-api.com/json')
   .then( response => response.json() )
   .then( data => console.log(data) )
2
nobar

Vous devez utiliser la solution proxy, mais lui transmettre l'IP du client au lieu du proxy. Voici un exemple de format d'URL pour l'API que vous avez spécifiée, en utilisant l'IP de WikiMedia:

http://ip-api.com/json/208.80.152.201

2
Tallboy