React-App erstellen Erlaube Zugriffssteuerung Origin-Problem

Question

Ich habe eine mit create-react-app erstellte Wetter-App bereitgestellt. In der Entwicklung würde ich die Chrome-Erweiterung verwenden, um Zugriffssteuerung zu ermöglichen. Jetzt, wo es mit Github Seiten entfaltet wird, erhalte ich die Fehlermeldung:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' https://boka44.github.io ' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Es scheint, als ob ich einen Kopf auf meinen Server hinzufügen müssen, aber ich bin verwirrt, wie und wo es hinzuzufügen.

Mein Code ist hier: https://github.com/Boka44/weather

Jede mögliche Hilfe würde sehr geschätzt werden.

Answer 1

Der API-Endpunkt (derjenige, der Wetterinformationen bereitstellt), den Sie anrufen, hat CORS deaktiviert, was bedeutet, dass Sie nie einen Client-gerichteten Anruf tätigen können (z. B. über einen Browser), da der Browser den Anruf blockiert.

Sie haben 2 Möglichkeiten:

• Wenn Sie die API-Endpunkt ändern können: Sie CORS-Header hinzufügen können Ursprünge von Ihrem Client App-Domain zu ermöglichen.
• Wenn Sie den Servercode nicht ändern können: Erstellen Sie Ihren eigenen API-Endpunkt, der den ursprünglichen API-Endpunkt aufruft und Ihre Client-App Ihre eigene API aufruft. (Sie stellen lediglich einen Proxy-Server her, der Ihre Aufrufe an den ursprünglichen API-Endpunkt leitet). In diesem Fall können Sie einen CORS-Header auf Ihrem Server angeben, um nur Aufrufe von Ihrer Client-Anwendungsdomäne zuzulassen.

Answer 2

Dark Sky API docs sagt, dass es CORS nicht erlaubt. Sie können also keine Daten von Ihrem Server zu Ihrem clientseitigen Code abrufen. Erstellen Sie also eine proxy server in PHP oder anderen Plattformen, die einen API-Aufruf ausführen und die JSON-formatierte Antwort erstellen.