Ich habe das CORS in der Kopfzeile hinzugefügt, erhalte jedoch immer noch das CORS-Problem in meiner Anfrage. Was ist der richtige Weg, um CORS und andere Anforderungen in den Headern hinzuzufügen und zu verarbeiten?
Hier ist der Code der Servicedatei:
import { HttpClient, HttpHeaders, HttpClientModule } from '@angular/common/http';
const httpOptions = {
headers: new HttpHeaders({
'Access-Control-Allow-Origin':'*',
'Authorization':'authkey',
'userid':'1'
})
};
public baseurl = 'http://localhost/XXXXXX';
userAPI(data): Observable<any> {
return this.http.post(this.baseurl, data, httpOptions)
.pipe(
tap((result) => console.log('result-->',result)),
catchError(this.handleError('error', []))
);
}
Error:
Die Antwort auf die Preflight-Anforderung besteht die Zugriffssteuerungsprüfung nicht: In der angeforderten Ressource ist kein Header 'Access-Control-Allow-Origin' vorhanden. Origin ' http: // localhost: 4200 ' ist daher kein Zugriff gestattet
fehlgeschlagen: HTTP-Fehlerantwort für (unbekannte URL): 0 Unbekannter Fehler
In meinem serverseitigen Code habe ich CORS zur Indexdatei hinzugefügt.
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token');
Antworten:
Nach meiner Erfahrung funktionierten die Plugins mit HTTP, jedoch nicht mit dem neuesten httpClient. Außerdem war das Konfigurieren der CORS-Antwortheader auf dem Server keine Option. Also habe ich eine
proxy.conf.json
Datei erstellt, die als Proxyserver fungiert.Lesen Sie mehr dazu hier .
proxy.conf.json
Datei:Ich habe die
proxy.conf.json
Datei direkt neben derpackage.json
Datei im selben Verzeichnis abgelegt.Dann habe ich den Startbefehl in der Datei package.json geändert:
Der HTTP-Aufruf von meiner App-Komponente:
Zuletzt müsste ich
npm start
oder verwenden , um meine App auszuführenng serve --proxy-config proxy.conf.json
quelle
target
in der Datei proxy.config einstellen?HttpErrorResponse {headers: HttpHeaders, status: 200, statusText: "OK", url: "http://localhost:4200/", ok: false, …} error: SyntaxError: Unexpected token < in JSON at position 0 at JSON.parse (<anonymous>) message: "Unexpected token < in JSON at position 0" "
Sie können auch die
fetch
Funktion und denno-cors
Modus ausprobieren . Ich finde es manchmal einfacher, es zu konfigurieren als Angulars integriertes http-Modul. Sie können auf der Netzwerkregisterkarte der Chrome Dev-Tools mit der rechten Maustaste auf Anforderungen klicken und diese in die Abrufsyntax kopieren.quelle
no-cors
blockiert das. Es blockiert auch das Setzen des Inhaltstyps aufapplication/json
.Access to XMLHttpRequest at '..' from origin '..' has been blocked by CORS policy: Request header field x-timezone is not allowed by Access-Control-Allow-Headers in preflight response.
nicht inAccess-Control-Request-Headers: cache-control,x-timezone
der Lage zu überschreiben, was standardmäßig hinzugefügt wurde :( und Github hat dies als AntwortAccess-Control-Allow-Headers: Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, Accept-Encoding, X-GitHub-OTP, X-Requested-With, User-Agent
Abruf funktionierthttpclient
mit Abfangjäger lange Zeit zurück :)Wenn Sie wie ich sind und einen lokalen SMS-Gateway-Server verwenden und eine GET-Anfrage an eine IP wie 192.168.0.xx senden, erhalten Sie mit Sicherheit einen CORS-Fehler.
Leider konnte ich keine Angular-Lösung finden, aber mit Hilfe einer früheren Wiederholung habe ich meine Lösung erhalten und veröffentliche eine aktualisierte Version für Angular 7 8 9
Einfach wie gewohnt abonnieren.
quelle
Stellen Sie sicher, dass der Header für HttpClient in NG5 so aussieht:
Sie können mit Ihrer localhost-URL einen API-Anruf tätigen. Das funktioniert bei mir.
quelle
Ein POST mit httpClient in Angular 6 führte auch eine OPTIONS-Anforderung aus:
Überschriften Allgemein:
Mein Perl-REST-Server implementiert die OPTIONS-Anforderung mit dem Rückkehrcode 200.
Der nächste POST-Anforderungsheader:
Hinweis Access-Control-Request-Header: Inhaltstyp.
Mein Backend-Perl-Skript verwendet also die folgenden Header:
Mit diesem Setup haben GET und POST für mich funktioniert!
quelle
Bitte importieren Sie Anforderungsoptionen von eckigen Kors
und fügen Sie Ihrem Code Anforderungsoptionen hinzu, wie unten angegeben
Anfrageoption in Ihrer API-Anfrage senden
Code-Snippet unten-
und fügen Sie CORS in Ihren Backend-PHP-Code ein, wobei alle API-Anfragen zuerst landen.
Versuchen Sie dies und lassen Sie mich wissen, ob es funktioniert oder nicht. Ich hatte das gleiche Problem. Ich habe CORS von angle5 hinzugefügt, das nicht funktioniert hat. Dann habe ich CORS zum Backend hinzugefügt und es hat bei mir funktioniert
quelle
Das Folgende funktionierte für mich nach stundenlangem Versuch
Der folgende Code hat jedoch nicht funktioniert. Ich bin mir nicht sicher, warum, hoffentlich kann jemand diese Antwort verbessern.
quelle