it-swarm.com.de

Zugriffskontrolle Ursprung in Angular 2 zulassen

Ich habe ein Problem mit dem Abrufen von Daten von meinem node.js-Server.

Die Kundenseite ist:

    public getTestLines() : Observable<TestLine[]> {
    let headers = new Headers({ 'Access-Control-Allow-Origin': '*' });
    let options = new RequestOptions({ headers: headers });

    return this.http.get('http://localhost:3003/get_testlines', options)
                .map((res:Response) => res.json())
                .catch((error:any) => Observable.throw(error.json().error || 'Server error')); 
}

auf dem Server setze ich auch die Header:

resp.setHeader('Access-Control-Allow-Origin','*') 
resp.send(JSON.stringify(results))

Aber ich bekomme einen Fehler

"XMLHttpRequest kann http: // localhost: 3003/get_testlines ..__ nicht laden. Die Preflight-Anforderung kann die Zugriffskontrolle nicht bestehen: Nein Der Header" Access-Control-Allow-Origin "ist vorhanden Die angeforderte Ressource. Origin ' http: // localhost: 3000 ' ist daher nicht zulässig Zugriff. "

Wie kann ich es reparieren? Wenn ich Header entferne, heißt es, dass dieser Header erforderlich ist. 

8
Michal Bialek

Access-Control-Allow-Origin ist ein AntwortHeader, kein Anforderungsheader.

Sie müssen es in der Antwort anzeigen, nicht in der Anfrage.

Sie haben versucht, es auf die Antwort zu setzen:

resp.setHeader('Access-Control-Allow-Origin','*') 

… Aber es hat nicht funktioniert.

Dies ist wahrscheinlich darauf zurückzuführen, dass Sie die richtige Anfrage nicht beantwortet haben. Die Fehlermeldung lautet:

Antwort auf Preflight-Anforderung besteht keine Zugriffskontrollprüfung

Sie haben etwas ausgeführt, um die Anfrage als Preflight zu verwenden. Das bedeutet, bevor der Browser die GET-Anfrage abarbeitet, die Sie versuchen, eine OPTIONS-Anfrage zu machen.

Dies wird vermutlich von einem anderen Code auf Ihrem Server gehandhabt, sodass die Zeile resp.setHeader('Access-Control-Allow-Origin','*') nicht getroffen wird. 

Eine Ursache für das Ausführen einer Preflight-Anforderung ist das Hinzufügen von Anforderungsheadern (außer einer kleinen Anzahl von Ausnahmen). Das Hinzufügen von Access-Control-Allow-Origin zu request löst eine Preflight-Anforderung aus. Sie müssen also zunächst versuchen, das Problem zu beheben, indem SieAccess-Control-Allow-Origin aus der Anforderung entfernen.

Wenn dies fehlschlägt, müssen Sie Ihren Server so einrichten, dass er sowohl auf die OPTIONS-Anfrage als auch auf die GET-Anfrage reagieren kann.

8
Quentin

Access-Control-Allow-Origin ist ein Response-Header , kein Request-Header Sie müssen die Berechtigung in Ihrem Backend festlegen. Sie müssen also die Datei cors.js erstellen, die alle erforderlichen Berechtigungen enthält.

function crosPermission(){
  this.permission=function(req,res,next){
    res.header('Access-Control-Allow-Origin','*');
    res.header('Access-Control-Allow-Headers','Content-Type');
    res.header('Access-Control-Allow-Methods','GET','POST','PUT','DELETE','OPTIONS');
    next();
  }
}

module.exports= new crosPermission();

nächster Schritt Sie müssen eine Zeile in Ihre app.js einfügen

    var cors=require('./cors');
    app.use(cors.permission)
2
Bettaibi Nidhal

Setzen Sie nicht Access-Control-Allow-Origin in der Anfrage, es wird dort nie gebraucht. Sie sollten überprüfen, ob der Header in der Antwort vorhanden ist (in der Entwicklerkonsole). Es wäre hilfreich, wenn Sie mehr vom Backend-Code freigeben würden.

1
Mezo Istvan

Wenn dies Rest API sein soll => http: // localhost: 3003/get_testlines

verwenden Sie dann @CrossOrigin (origins = "*"), um das domänenübergreifende Problem zu lösen

0
aabbcc

Das hat nichts mit dem Kunden zu tun. Sie können dieses Problem ganz einfach lösen, indem Sie der Configure-Methode Cors hinzufügen. so was:

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            InitializeDatabase(app);

            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            app.UseMiddleware<ExceptionToResultMiddleware>();

            app.UseSwagger();

            app.UseSwaggerUI(c =>
            {
                c.SwaggerEndpoint("/swagger/v1/swagger.json", "My API V1");
            });

            app.UseCors(s => s.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());  ==> This section

            app.UseMvc();
        }

Starten Sie nun Ihr Projekt neu und überprüfen Sie es erneut.

0