L'accès à XMLHttpRequest à '...' à partir de l'origine 'localhost: 3000' a été bloqué par la stratégie CORS

Question

Cela peut être un doublon, mais je n'ai pas trouvé de fil concernant spécifiquement mon problème.

J'effectue l'appel d'API suivant:

const config = {
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Methods": "GET,PUT,POST,DELETE,PATCH,OPTIONS"
  }
};

const {
  data: { ip }
} = await axios.get("https://api.ipify.org?format=json", config);

Et cela jette une erreur:

Access to XMLHttpRequest at 'https://api.ipify.org/?format=json' from Origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Lorsque je déploie mon application sur Heroku, l'appel d'API fonctionne comme prévu. Cependant, cela ne fonctionne pas lors du développement sur ma machine locale. Je ne sais pas ce que je manque ici.

Answer 1

Accédez à votre fichier package.json et ajoutez: "proxy": "your-api-url" mais uniquement le début/la base, par exemple si vous utilisez l'api pokemon, il vous suffit de définir "proxy": "- https://pokeapi.co/api/v2 "et dans votre fichier de service, vous pouvez utiliser axios avec le chemin dont vous avez besoin:

axios.get("/pokemon?limit=1000") .then(response => { resolve(response.data.results); })

Answer 2

Cet article a résolu mon problème en un rien de temps.

La solution la plus rapide que vous pouvez faire est d'installer moesif CORS extension . Une fois installé, cliquez dessus dans votre navigateur pour activer l'extension. Assurez-vous que le libellé de l'icône passe de "désactivé" à "activé"