chrome · JavaScript
Die Meldung
Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Was es bedeutet
Die Anfrage erreichte den Server und eine Antwort kam zurück, doch diese Antwort trug keinen Header, der diesen Origin erlaubt — deshalb weigerte sich der Browser, sie an Ihr JavaScript zu geben. Nur Browser setzen diese Regel durch, weshalb dieselbe URL mit curl funktioniert: es sieht aus, als sei der Server in Ordnung und nur der Browser kaputt. Die Behebung liegt immer beim Server: Access-Control-Allow-Origin: http://localhost:3000 in die Antwort aufnehmen. Das Frontend kann nichts tun, und gehört der Server nicht Ihnen, ist ein Proxy über den eigenen Server der einzige Weg. Allow-Origin: * gilt nicht für Anfragen, die Cookies senden; dort braucht es den exakten Origin plus Allow-Credentials.
Die Lösung
curl -I -H "Origin: http://localhost:3000" https://api.example.com/data- Ausgegeben von
- chrome
- JavaScript
- 15
Browser- und Node-Fehler nennen meist, was kaputtging, aber nicht, warum der Wert so wurde — Sie haben undefined gelesen, es war keine Funktion, es war kein JSON — die Stelle zum Reparieren liegt also stromaufwärts der werfenden Zeile, und nur diese Zeile mit ?. und Standardwerten stillzulegen lässt dasselbe Problem weiter entfernt und in schwerer erkennbarer Gestalt wiederkehren.
Eine Fehlermeldung lesen
- Von der ersten Zeile abwärts lesen. Weiter unten geht es um das Innere des Werkzeugs; die Ursache steht meist oben.
- Gibt es Datei und Zeilennummer, dort anfangen — nicht der oberste Stack-Frame, sondern die oberste Zeile, die eine eigene Datei nennt.
- Die Meldung wörtlich suchen, vorher aber eigene Pfade und Variablennamen entfernen; genau die verhindern den Treffer.
- Dieselbe Lage wird je Werkzeugversion anders formuliert. Passen die Treffer nicht, die Versionsnummer mit in die Suche.
- Vor dem Einfügen einer Lösung prüfen, was sie verwirft. Manches davon lässt sich nicht zurückholen.
Häufige Fragen
Q. Was bedeutet „Access to fetch at 'https://api.example.com/data' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.“?
Die Anfrage erreichte den Server und eine Antwort kam zurück, doch diese Antwort trug keinen Header, der diesen Origin erlaubt — deshalb weigerte sich der Browser, sie an Ihr JavaScript zu geben. Nur Browser setzen diese Regel durch, weshalb dieselbe URL mit curl funktioniert: es sieht aus, als sei der Server in Ordnung und nur der Browser kaputt. Die Behebung liegt immer beim Server: Access-Control-Allow-Origin: http://localhost:3000 in die Antwort aufnehmen. Das Frontend kann nichts tun, und gehört der Server nicht Ihnen, ist ein Proxy über den eigenen Server der einzige Weg. Allow-Origin: * gilt nicht für Anfragen, die Cookies senden; dort braucht es den exakten Origin plus Allow-Credentials.
Q. Wie behebe ich das?
curl -I -H "Origin: http://localhost:3000" https://api.example.com/data — vor dem Ausführen oben prüfen, was dieser Befehl verwirft.
Q. Welches Werkzeug gibt das aus?
chrome. Es gehört zu JavaScript, und die Meldung hat 23 Wörter.