Wie CORS Anfrage in Header in Angular 5

Question

hinzufügen Ich habe die CORS in Header hinzugefügt, aber ich bekomme immer noch die CORS Problem in meiner Anfrage. Was ist der richtige Weg, CORS und andere Anfragen in den Headern hinzuzufügen und zu behandeln?

Hier ist Service-Datei Code:

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', [])) 
    ); 
} 

Fehler:

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:4200 ' is therefore not allowed access

failed: Http failure response for (unknown url): 0 Unknown Error

In meinem serverseitigen Code, ich habe CORS in der 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'); 

Answer 1

CORS (Cross-Origin Resource Sharing) ist eine Möglichkeit für den Server zu sagen: „Ich habe Ihre Anfrage akzeptieren, auch wenn Sie von einem anderen Ursprung kamen.“ Dies erfordert die Zusammenarbeit vom Server - wenn Sie also den Server nicht ändern können (z. B. wenn Sie eine externe API verwenden), funktioniert dieser Ansatz nicht.

Ändern Sie den Server, um den Header Access-Control-Allow-Origin hinzuzufügen: * um querverlaufende Anfragen von überall zu ermöglichen (oder eine Domäne anstelle von * anzugeben).

Answer 2

versuchen, diese "Allow-Control-Allow-Origin: *" Plugin

https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?utm_source=chrome-app-launcher-info-dialog

Answer 3

Nach meiner Erfahrung der Plugins mit http gearbeitet, aber nicht mit dem neuesten Httpclient. Auch die Konfiguration der CORS-Antwort-Header auf dem Server war nicht wirklich eine Option. Also habe ich eine proxy.conf.json-Datei erstellt, die als Proxy-Server fungiert.

mehr das Lesen Sie hier: https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

unten ist mein prox.conf.json Datei

{ 
    "/posts": { 
    "target": "https://example.com", 
    "secure": true, 
    "pathRewrite": { 
    "^/posts": "" 
    }, 
    "changeOrigin": true 
    } 
} 

ich die proxy.conf.json Datei direkt neben der die package.json platziert Datei im selben Verzeichnis

dann änderte ich den Startbefehl in der package.json Datei wie unten

"start": "ng serve --proxy-config proxy.conf.json" 

jetzt ist der http Anruf von meiner App-Komponente als

return this._http.get('/posts/pictures?method=GetPictures') 
.subscribe((returnedStuff) => { 
    console.log(returnedStuff); 
}); 

folgt schließlich meine app zu laufen, würde ich npm verwenden beginnen oder ng dienen --proxy -config proxy.conf.json