web-dev-qa-db-fra.com

Problème 'Access-Control-Allow-Origin' lorsque l'appel d'API a été effectué à partir de React (application isomorphique)

Je rencontre un problème avec mon application JavaScript isomorphe avec React et Express. 

J'essaie de faire une requête HTTP avec axios.get lorsque mon composant s'installe

componentDidMount() {
  const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders';
  axios.get(url).then( res => {
    //use res to update current state
  })
}

J'obtiens un statut 200 res de l'API, mais je n'obtiens aucune donnée de réponse ni d'erreur dans ma console

XMLHttpRequest cannot load http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:3000' is therefore not allowed access.

Cependant, si je fais la demande dans mon server.js

const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders';
axios.get(url).then(res => {
    //console.log(res);
});

Cela fonctionne bien et je reçois des données de réponse lorsque le serveur démarre. Est-ce un problème avec l'API réelle ou est-ce que je fais quelque chose de mal? S'il s'agissait d'un problème CORS, je suppose que la demande dans server.js ne fonctionnerait pas non plus? Merci!

javascriptnode.jsreactjsisomorphic-javascriptaxios
15
Scott Davidson

CORS est une fonctionnalité browser. Les serveurs doivent s'inscrire dans CORS pour permettre aux navigateurs de contourner les règles de même origine. Votre serveur ne serait pas soumis à la même restriction et ne pourrait envoyer de requêtes à aucun serveur avec une API publique. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Créez un point de terminaison sur votre serveur avec CORS activé, qui peut agir en tant que proxy pour votre application Web.

13
azium

Utilisez l'extension Google Chrome appelée Allow-Control-Allow-Origin: * . Il modifie les en-têtes CORS à la volée dans votre application.

16
Colleen Purcell

Je pense que la réponse à votre question est ici

Pour que Chrome envoie Access-Control-Allow-Origin dans l'en-tête, alias simplement localhost dans votre fichier/etc/hosts vers un autre domaine, par exemple:

127.0.0.1 localhost votredomaine.com

1
Pablo Darde

Je ne sais pas si cela aidera, mais la même erreur se produisait lorsque je débogue à distance une application native. J'exécutais le débogueur sur 192.168.x.x: 8081. J'ai lu un peu sur ceci le partage de ressources d'origine croisée (CORS) pour me renseigner sur ce qu'est la CORS. (Je suis un débutant) et j'ai changé mon URL de IP: 8081 à localhost: 8081 et mon problème a été résolu.

0
Mingina

J'ai eu le même problème. les autres réponses sont correctes, mais il existe une autre solution . vous pouvez définir l'en-tête de la réponse pour permettre l'accès croisé d'origine ..__ en fonction de this post vous devez ajouter les codes suivants avant tout appel à app.get :

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  next();
  });

cela a fonctionné pour moi :)

0
arash nadali

Parce que le serveur n'a pas d'en-tête CORS, vous n'êtes pas autorisé à obtenir la réponse.

Voici l'en-tête de l'API que j'ai capturé dans Chrome brower:

Age:28
Cache-Control:max-age=3600, public
Connection:keep-alive
Date:Fri, 06 Jan 2017 02:05:33 GMT
ETag:"18303ae5d3714f8f1fbcb2c8e6499190"
Server:Cowboy
Status:200 OK
Via:1.1 vegur, 1.1 e01a35c1b8f382e5c0a399f1741255fd.cloudfront.net (CloudFront)
X-Amz-Cf-Id:GH6w6y_P5ht7AqAD3SnlK39EJ0PpnignqSI3o5Fsbi9PKHEFNMA0yw==
X-Cache:Hit from cloudfront
X-Content-Type-Options:nosniff
X-Frame-Options:SAMEORIGIN
X-Request-Id:b971e55f-b43d-43ce-8d4f-aa9d39830629
X-Runtime:0.014042
X-Ua-Compatible:chrome=1
X-Xss-Protection:1; mode=block

Pas d'en-tête CORS dans les en-têtes de réponse.

0
Nguyen Thanh