React Isomorphic Fetch Pas d'en-tête 'Access-Control-Allow-Origin' avec l'API Fusion de Yelp

Question

J'apprécierais vraiment l'aide de quelqu'un. Je suis relativement nouveau dans le développement de React, en utilisant Mac OSX et Chrome comme navigateur. J'ai une petite application qui tente de faire une requête GET async de l'API Yelp Fusion en utilisant « isomorphe-fetch », mais reçois l'erreur suivante:

Fetch API cannot load https://api.yelp.com/v3/businesses/search ?[remaining URL] Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:3000 ' is therefore not allowed access. The response had HTTP status code 500. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Je l'ai fait beaucoup de recherche pour voir ce que les réponses aux identiques Des problèmes existent déjà, mais je suis encore plus confus dans la façon d'aborder mon problème avec mes connaissances relativement nouvelles à ce type d'environnement de développement. (Les réponses qui semblent particulièrement utiles sont: Response to preflight request doesn't pass access control check et API Request with HTTP Authorization Header inside of componentDidMount, mais je ne comprends pas vraiment comment implémenter ces solutions avec mon environnement.Toutes les tentatives que je fais semblent incorrectes et n'entraînent pas de changement.).

Comme une note de côté: j'ai installé le allow-Control-Allow-Origin: extension * sur mon navigateur Chrome, mais je reçois la même erreur - juste un raccourci, une description moins élaborée de celui-ci:

Fetch API cannot load https://api.yelp.com/v3/businesses/search ?[remaining URL]. Response for preflight has invalid HTTP status code 500

Voici comment j'appelle l'opération d'extraction dans mon code:

var options = (
    method: 'get', 
    headers: new Headers({ 
     'Access-Control-Allow-Origin': '*', 
     'Authorization': [my token] 
     'Content-Type': 'application/json' 
    }) 
} 
return fetch(url, options); 

est-ce un problème en raison de la syntaxe de ma tête avec les exigences de jeton oauth2 Yelp Fusion, est-ce que je dois faire reliés aux procurations quelque chose, ou est la raison à cause d'autre chose? En ce qui concerne les proxy, actuellement j'utilise une application entièrement basée sur le client et n'utilise pas du tout de code côté serveur. Serait-ce encore possible étant donné mon environnement? Toute indication quant à la direction que je devrais prendre et la clarification de mes idées fausses seraient grandement appréciées.

Encore une fois, merci pour votre aide pour un développeur en pleine croissance.

Answer 1

Cette cause du problème est que https://api.yelp.com/ ne prend pas en charge CORS.

Et rien de ce que vous pouvez dans votre propre code d'application pour résoudre ce problème-peu importe ce que vous essayez, vous ne pouvez pas changer le fait que https://api.yelp.com/ ne prend pas en charge CORS.

Apparemment, l'API Yelp supporte cependant JSONP; Voir par exemple Yelp API Origin http://localhost:8888 is not allowed by Access-Control-Allow-Origin.

Donc en utilisant https://api.jquery.com/jquery.getjson/ ou similaire dans votre code d'entrée, vous pouvez faire des requêtes à l'API inter-origine de votre code d'accès.

---

A related issue dans le suivi des problèmes GitHub pour les exemples de l'API Yelp repo confirme pas CORS:

TL;DR: No CORS is not supported by api.yelp.com

Et another related issue:

As I answered in #99 , we do not provide the CORS headers necessary to use clientside js to directly make requests to the api.

Les deux commentaires cités ci-dessus sont d'une Ingénieur Yelp.

Donc, quel que soit le moyen, votre code JavaScript frontend ne peut en aucun cas faire des demandes directement aux terminaux de l'API Yelp et obtenir des réponses normales (par opposition aux réponses JSONP).Plus précisément, étant donné que les réponses du point de terminaison API https://api.yelp.com/v3/businesses/search n'incluent pas l'en-tête de réponse Access-Control-Allow-Origin, les navigateurs n'autoriseront pas votre code JavaScript frontal à accéder à ces réponses.

En outre, parce que votre demande comprend le Authorization et un en-tête Content-Type avec la valeur application/json, votre navigateur fait un CORS preflight options request avant jamais tenter la GET réelle demande que vous essayez d'envoyer.

Et ce contrôle en amont est ce qui échoue spécifiquement dans ce cas. Mais toute autre requête que vous apportez du code JavaScript frontal à ce point de terminaison API échouera également, même si elle n'a pas déclenché de contrôle en amont.