Angular2: Unterstützung für withCredentials und useXDomain

Question

Ich bin neu bei angular2. Ich versuche mich auf meinem Django-Server anzumelden, der ein Produktionsserver von localhost ist, wo ich gerade meinen Frontend-Code schreibe. Außerdem bin ich Portforwarding zu meinem Produktionsserver. Ich bekomme immer wieder das CORS-Problem. Hier ist der Fehler, den ich in meiner Konsole erhalten:

XMLHttpRequest nicht https://www.smartkart.ca/api/user/login/ laden kann. Die Antwort auf die Preflight-Anforderung übergibt die Zugriffskontrollprüfung nicht: Auf der angeforderten Ressource ist kein Header "Access-Control-Allow-Origin" vorhanden. Ursprung 'http://127.0.0.1:8000' ist daher nicht erlaubt.

ich geschrieben habe meine Http und haben fast alle Blogs da draußen, um herauszufinden, eine Lösung, aber kein Glück lesen. Ich glaube, ich muss die Eigenschaft withCredentials: true verwenden. Ich lese einige Blogs und habe meinen Code geändert, um mitCredentials zu unterstützen, aber kein Glück.

Hier ist mein Code-Schnipsel:

import {Injectable} from 'angular2/core'; 
import {Http} from 'angular2/http'; 
import 'rxjs/add/operator/map'; 
import {Headers} from 'angular2/http'; 
import {BaseRequestOptions, RequestOptions} from 'angular2/http'; 


@Injectable() 
export class HTTPService { 
constructor(private _http: Http) { 

} 

baseUrl: String = "https://www.smartkart.ca/"; 
getStoreList() {   
    return this._http.get(this.baseUrl + 'api/current/store/') 
     .map(res => res.json()); 
}; 

getCookie(name) { 
    let value = "; " + document.cookie; 
    let parts = value.split("; " + name + "="); 
    if (parts.length == 2) 
    return parts.pop().split(";").shift(); 
}; 


login(){ 
    // var request = new XMLHttpRequest(); 
    // var params = JSON.stringify({'email': 'karan@smartkart.ca', 'password': 'k0ttawa#1234'}); 
    // request.open('POST', this.baseUrl+ "api/user/login/", true); 
    // request.onreadystatechange = function() {if (request.readyState==4) alert("It worked!");}; 
    // request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    // request.setRequestHeader("Content-length", params.length.toString()); 
    // request.setRequestHeader("Connection", "close"); 
    // request.send(params);    
    var data = JSON.stringify({'email': 'test@smartkart.ca', 'password': 'blahblah'});  
    var params = data; 
    var headers = new Headers(); 
    headers.append('Accept', 'application/json'); 
    headers.append('Authorization', 'Basic ' + btoa('karan@smartkart.ca:k0ttawa#1234')); 
    headers.append("Content-type", "application/x-www-form-urlencoded, application/json"); 
    // headers.append("Content-length", params.length.toString()); 
    // headers.append('Access-Control-Allow-Origin', '*'); 
    // headers.append('Access-Control-Request-Headers', 'x-requested-with'); 
    // headers.append('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE'); 
    // headers.append('Access-Control-Allow-Headers', 'X-Requested-With,content-type'); 
    // headers.append('Access-Control-Allow-Credentials', 'true'); 
    // headers.append('Content-Type', 'pplication/x-www-form-urlencoded'); 
    // headers.append('X-CSRFToken', this.getCookie('csrftoken')); 

    return this._http.post(this.baseUrl+ "api/user/login/", params, 
     { 
      headers: headers 
     } 
    ).map(res => res.json()) 

}; 

} 

hier ist, was ich in meinem Netzwerk Tab im Browser

nun sehen, ob ich die Genehmigung Header wegzunehmen i angemeldet bekomme In und ich bekomme den csrf Token zurück, aber ich kann nie eine Antwort vom Server wegen des CORS-Problems bekommen. Hier ist eine Momentaufnahme

ich einige Blogs lesen, wo es Abhilfen waren. Ich habe das auch versucht, aber keinen Erfolg.

Hier ist mein Code für die Problemumgehung:

import {Injectable} from 'angular2/core'; 
import {BrowserXhr } from 'angular2/http'; 

@Injectable() 
export class CORSBrowserXHr extends BrowserXhr { 

build(): any { 
    let xhr = super.build(); 
    xhr.withCredentials = true; 
    return <any>(xhr); 
} 
} 

Und in Bootstrap-i fügen Sie den folgenden:

/// <reference path="../typings/browser.d.ts" /> 
import {bootstrap} from 'angular2/platform/browser'; 
import {AppComponent} from "./app.component"; 
import {ROUTER_PROVIDERS} from "angular2/router"; 
import {APP_BASE_HREF} from 'angular2/router'; 
import {provide} from 'angular2/core'; 
import {LocationStrategy, HashLocationStrategy} from 'angular2/router'; 
import {HTTP_PROVIDERS} from "angular2/http"; 
import {BrowserXhr} from 'angular2/http'; 
import {CORSBrowserXHr} from "./CORSBrowserXHr.services"; 

bootstrap(AppComponent, [ROUTER_PROVIDERS, HTTP_PROVIDERS,  provide(BrowserXhr, {useClass:CORSBrowserXHr}), 
provide(LocationStrategy, {useClass: HashLocationStrategy})]); 

Ich verstehe angular2 unter Beta ist, aber ich glaube, dass sie jetzt ComeUp haben müssen mit einer Lösung für die CORS-Unterstützung. Wenn jemand Ideen hat, bitte Kommentar.

Vielen Dank im Voraus!

Answer 1

class MyBaseRequestOptions extends BaseRequestOptions { 
    headers: Headers = new Headers({ 
    'X-Requested-With': 'XMLHttpRequest' 
    }); 
    withCredentials: boolean = true; 
} 

bootstrap(AppComponent, [ provide(RequestOptions, {useClass: MyBaseRequestOptions}) ]); 

Können Sie mit diesem versuchen, aus: https://github.com/angular/angular/issues/4231

Answer 2

In der Tat gibt es zwei Hauptfälle in CORS:

• Einfache Anfragen. Wir sind in diesem Fall, wenn wir die HTTP-Methoden GET, HEAD und POST verwenden. Bei der Methode POST werden nur Inhaltstypen mit folgenden Werten unterstützt: text/plain, application/x-www-form-urlencoded, multipart/form-data. Selbst wenn Sie in diesem Fall sind und einen benutzerdefinierten Header verwenden (einen Header, den Sie in Ihrer Anfrage selbst definieren), werden Sie in die Preflight-Anfrage fallen.

• Vorbeleuchtete Anfragen.Wenn Sie keine einfachen Anfragen haben, wird eine erste Anfrage (mit der HTTP-Methode OPTIONS) durchgeführt, um zu prüfen, was im Zusammenhang mit domainübergreifenden Anfragen getan werden kann.

In Ihrem Fall sind Sie im zweiten Fall (Preflight Anfrage), da Sie einen benutzerdefinierten Header (definiert durch Ihre eigene) zu verwenden, die Authorization ein.

Die entsprechende OPTIONS-Anfrage definiert jedoch keinen Access-Control-Allow-Origin Header in ihrer Antwort. Dadurch kann der Browser feststellen, ob Sie (z. B. localhost: 3000) die Zielanforderung ausführen können.

Tatsächlich ist es kein Problem in Ihrer Angular2-Anwendung, sondern in der Server-Anwendung, auf die Sie zugreifen möchten. Letzteres sollte die entsprechenden CORS-Header wie die Access-Control-Allow-Origin eins zurückgeben. Andernfalls wird Ihr Browser die Anforderung blockieren ...

Diese Artikel könnten Sie interessieren:

• http://restlet.com/blog/2015/12/15/understanding-and-using-cors/
• http://restlet.com/blog/2016/09/27/how-to-fix-cors-problems/