Ich arbeite an einer React-Anwendung und ich verwende Fetch, um eine Anfrage zu senden. Ich habe kürzlich ein Anmeldeformular erstellt und jetzt integriere ich es mit seiner API. Zuvor akzeptierte die API URL-kodierte Daten und alles lief gut. Aber jetzt, da sich die Anforderung geändert hat und die API Daten in JSON akzeptiert, musste ich den Inhaltstyp-Header von "application / x-www-form-urlencoded" in "application / json" ändern. Aber ich bekomme den folgenden Fehler:
Die Fetch-API kann Ссылка nicht laden. Die Antwort auf die Preflight-Anforderung besteht keine Zugriffskontrollprüfung: Nein Der 'Access-Control-Allow-Origin'-Header ist auf dem angeforderten Header vorhanden Ressource. Origin Ссылка ist daher nicht erlaubt Zugriff. Wenn eine undurchsichtige Antwort Ihren Anforderungen entspricht, legen Sie die Anfrage fest Modus zu 'no-cors', um die Ressource mit deaktivierter CORS zu holen.
Ich habe sogar die 'Access-Control-Allow-Header' in der API gesetzt, funktioniert aber immer noch nicht. Hier ist der relevante Code für die Clientseite:
%Vor%Und hier ist der relevante API-Code:
%Vor%Ich kann das Problem wirklich nicht lösen. Jede Art von Hilfe wird geschätzt.
Es stellt sich heraus, dass CORS nur bestimmte Inhaltstypen erlaubt.
Die einzigen zulässigen Werte für den Content-Type-Header sind:
- Anwendung / x-www-form-urlencoded
- multipart / form-data
- text / plain
Quelle: Ссылка
Um den Inhaltstyp auf "application / json" zu setzen, musste ich einen benutzerdefinierten Inhaltstyp-Header in der API festlegen. Ich habe nur die letzte Kopfzeile entfernt und diese hinzugefügt:
%Vor%und es funktioniert alles gut.
Sie verstoßen gegen die Richtlinie Gleiche Herkunft . Eine Website www.example.com kann möglicherweise niemals Ressourcen von einer anderen Website www.example.net als von sich selbst laden.
Während der Entwicklung muss das manchmal möglich sein. Um dies zu umgehen:
Tags und Links json cors reactjs fetch content-type