"Access-Control-Allow-Origin' problème lors de l'appel d'API fabriqués à partir de Réagir (Isomorphe app)

Je suis en cours d'exécution dans un problème avec mon isomorphe application JavaScript à l'aide de Réagir et d'Exprimer.

Je suis en train de faire une requête HTTP avec axios.obtenez lors de mon composant monte

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
  })
}

Je suis l'obtention d'un statut de 200 res à partir de l'API, mais je n'obtiens pas de réponse de données et d'avoir une 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);
});

Il fonctionne très bien et je reçois la réponse de données lorsque le serveur démarre. Est-ce un problème avec l'API réel ou suis-je en train de faire quelque chose de mal? Si c'était une question de la SCRO je devine que la demande en server.js ne fonctionne pas non plus? Merci!

OriginalL'auteur Scott Davidson | 2017-01-06

14

De la SCRO est un navigateur fonctionnalité. Les serveurs ont besoin d'opter pour la SCRO pour permettre aux navigateurs de contourner même de la politique d'origine. Votre serveur n'auraient pas la même restriction et être en mesure de faire des demandes à n'importe quel serveur avec une API publique. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Créer un point de terminaison sur votre serveur avec la SCRO activé qui peut agir comme un proxy pour votre application web.

la sécurité devrait toujours venir avant de commodité. Heureusement, le provisionnement de serveurs proxy peuvent être à 5 minutes de l'exercice. De plus, il existe des services de proxy qui exposent ce type de fonctionnalité déjà, mais seulement de permettre à autant de requêtes gratuites. Configuration de votre propre proxy vaut le très peu d'effort.
J'ai eu le même problème et j'ai lu les docs que vous avez mentionné ci-dessus ne comprends toujours pas idée de la SCRO pouvez-vous expliquer, s'il vous plaît
Pouvez-vous faire une nouvelle stackoverflow question et mentionner tout ce que vous rencontrez des difficultés de compréhension, puis un commentaire ici avec le lien de votre post? Je serai heureux de répondre à
J'ai posé la question ici, veuillez jeter un oeil stackoverflow.com/questions/51701630/...
J'ai le même problème.Dans mon cas, je peux créer des enregistrements à partir de l'ordinateur de bureau navigateur web, mais ne peut pas créer par le biais de mon iPhone navigateur web.

OriginalL'auteur azium
16

D'utiliser google Chrome Extension appelée Permettez-Control-Allow-Origin: *. Il modifie la SCRO en-têtes de à la volée dans votre application.

OriginalL'auteur Colleen Purcell
1

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

À Chrome envoyer Access-Control-Allow-Origin dans l'en-tête, juste de l'alias de votre localhost dans votre fichier /etc/hosts pour certains autres domaines, comme:

127.0.0.1 localhost yourdomain.com

OriginalL'auteur Pablo Darde

Parce que le serveur n'ont pas la SCRO-tête, de sorte que vous ne sont pas autorisés à obtenir la réponse.

C'est l'en-tête de l'API que j'ai capturé à partir de 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 de la SCRO en-tête en-têtes de réponse.

OriginalL'auteur Nguyen Thanh

0

Je ne sais pas si cela va aider, mais j'avais la même erreur lors de débogage à distance d'une réaction de l'application native. J'étais en train de le débogueur sur 192.168.x.x:8081. J'ai lu un peu sur ce Cross-Origin Resource sharing (SCRO) de me renseigner sur ce que C est. (Je suis débutant) et changé mon URL à partir de IP:8081 à localhost:8081 et mon problème a été résolu.

OriginalL'auteur Mingina
0

J'ai eu le même problème. les autres réponses sont correctes, mais il y a une autre solution.
vous pouvez définir des en-tête de réponse pour permettre à la croix-de l'origine de l'accès.
selon ce post vous devez ajouter l'un des codes suivants avant toute application.obtenez de l'appel:
```
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 🙂

OriginalL'auteur arash nadali

Vous devez vous connecter pour publier un commentaire.