Reagieren Isomorph Fetch Nein 'Access-Control-Allow-Origin' Header mit Yelp Fusion API

Question

Würde wirklich jemandes Hilfe zu schätzen wissen. Ich bin relativ neu in der Entwicklung von React und verwende Mac OS X und Chrome als meinen Browser. Ich habe eine kleine Anwendung, die eine Asynchron-GET-Anforderung von Yelp Fusion API zu machen versucht, mit ‚isomorph-Fetch‘, aber die folgende Fehlermeldung:

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.

Ich habe viel von der Suche getan, um zu sehen was für Antworten auf identische Probleme gibt es bereits, aber ich bin noch mehr verwirrt darüber, wie ich mein Problem mit meinem relativ neuen Wissen in dieser Art von Entwicklungsumgebung angehen kann. (Antworten, die besonders hilfreich scheinen, sind: Response to preflight request doesn't pass access control check und API Request with HTTP Authorization Header inside of componentDidMount, aber ich verstehe nicht wirklich, wie man diese Lösungen tatsächlich mit meiner Umgebung implementiert. Alle Versuche, die ich mache, scheinen falsch zu sein und ergeben keine Änderung.).

Als Randbemerkung: Ich habe die Installation zulassen-Control-Allow-Origin: * Erweiterung auf meinem Chrome-Browser, aber ich erhalte die gleiche Störung - nur eine verkürzte, weniger ausführliche Beschreibung davon:

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

Hier finden Sie, wie ich das in meinem Code holen nennen:

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

ist dies ein Problem aufgrund der Syntax meiner Header mit Yelp Fusion OAuth2 Token Anforderungen, muss ich etwas Proxy-Bezug zu tun, oder liegt das an etwas anderem? Wenn Proxy-bezogen, derzeit ich eine vollständig client-driven Anwendung ausführen und keinen serverseitigen Code überhaupt verwenden. Wäre das in meiner Umgebung noch möglich? Jede Anleitung, in welche Richtung ich gehen sollte, und die Klärung meiner Missverständnisse würde sehr geschätzt werden.

Nochmals vielen Dank für Ihre Hilfe für einen wachsenden Entwickler.

Answer 1

Diese Ursache des Problems ist, dass https://api.yelp.com/ CORS nicht unterstützt.

Und es gibt nichts, was Sie in Ihrem eigenen Anwendungscode beheben können - egal, was Sie versuchen, können Sie die Tatsache nicht ändern, dass https://api.yelp.com/ CORS nicht unterstützt.

Anscheinend unterstützt die Yelp API JSONP obwohl; siehe zum Beispiel Yelp API Origin http://localhost:8888 is not allowed by Access-Control-Allow-Origin.

So verwenden Sie https://api.jquery.com/jquery.getjson/ oder ähnliche in Ihrem Frontend-Code können Sie Anfragen an die Yelp-API Cross-Herkunft aus Ihrem Frontend-Code.

---

A related issue in dem Tracker GitHub Problem für die API Beispiele Repo-Karte bestätigt keine CORS:

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

Und 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.

Beide der Kommentare oben genannten sind von einem Yelp Ingenieur.

Also, was das bedeutet, es gibt keine Möglichkeit, dass Ihr Frontend-JavaScript-Code Anfragen direkt an Yelp-API-Endpunkte stellen und normale Antworten erhalten kann (im Gegensatz zu JSONP-Antworten).

Da die Antworten des API-Endpunkts https://api.yelp.com/v3/businesses/search nicht den Antwortkopf Access-Control-Allow-Origin enthalten, erlauben Browser Ihrem Frontend-JavaScript-Code keinen Zugriff auf diese Antworten.

Auch, weil Ihre Anfrage application/json die Authorization und einen Content-Type Header mit dem Wert enthält, hat Ihr Browser eine CORS preflight options request, bevor überhaupt die tatsächliche GET Anforderung versucht, Sie zu senden versuchen.

Und das Preflight ist, was speziell in diesem Fall fehlschlägt. Aber auch jede andere Anfrage, die Sie vom Frontend-JavaScript-Code an diesen API-Endpunkt stellen, würde fehlschlagen - selbst wenn kein Preflight ausgelöst wurde.