angular2: Ursprung ‚http: // localhost: 3000‘ ist daher nicht erlaubt Zugang für

Question

Ich habe ein django Backend und ich habe Kreuz Herkunft Anforderungen aktiviert wie folgt:

INSTALLED_APPS = [ 
    .. 
    'corsheaders', 

] 
MIDDLEWARE = [ 
    'django.contrib.sessions.middleware.SessionMiddleware', 
    'django.middleware.common.CommonMiddleware', 
    'django.middleware.csrf.CsrfViewMiddleware', 
    'django.contrib.auth.middleware.AuthenticationMiddleware', 
    'django.contrib.messages.middleware.MessageMiddleware', 
    'django.middleware.clickjacking.XFrameOptionsMiddleware', 
    'django.middleware.security.SecurityMiddleware', 
    'corsheaders.middleware.CorsMiddleware', 
] 
CORS_ORIGIN_ALLOW_ALL = True 

Ich habe jede Authentifizierung nicht implementiert. Ich versuche einfach, einen API-Endpunkt zu treffen und versuche, Daten auf meinem Angular2-Frontend zu holen.

Ich habe einen sessionbasierten Warenkorb im Django-Backend implementiert, der meine Produkte speichert (https://github.com/lazybird/django-carton). Als ich http://127.0.0.1:8000/api/shopping-cart/show/ durch meinen durchsuchbaren api traf es mir jedoch

{"1":{"product_pk":1,"price":"23000.00000","quantity":3},"2":{"product_pk":2,"price":"34000.00000","quantity":7},"4":{"product_pk":4,"price":"450.00000","quantity":1}} 

gibt, wenn ich versuche, die gleiche URL von meinem Angular2 Dienst zu schlagen: es wirft mir Fehler:

XMLHttpRequest cannot load http://127.0.0.1:8000/api/shopping-cart/show/. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost:3000' is therefore not allowed access. The credentials mode of an XMLHttpRequest is controlled by the withCredentials attribute. 

Mein Service-Aufruf wird wie folgt :

private myUrl: string = 'http://127.0.0.1:8000/api/shopping-cart/' 
    showCart(){ 

      return this.http.get(this.myUrl + 'show' + '/', {withCredentials:true}) 
      .toPromise() 
      .then(response => response.json()) 

     } 

Hinweis: Wenn ich {withCredentials: true} entfernen dann ist es nicht sessionid senden oder csrftoken und kehrt {} aber der Fehler verschwindet. Was mache ich falsch?

Answer 1

AFAIK, wenn Sie withCredentials: true verwenden Sie können nicht * für Access-Control-Allow-Origin verwenden, sondern stattdessen http://localhost:3000 benötigen.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Origin

Access-Control-Allow-Origin: <origin> | *
The origin parameter specifies a URI that may access the resource. The browser must enforce this. For requests without credentials, the server may specify "*" as a wildcard, thereby allowing any origin to access the resource.

Answer 2

In meiner Django-Einstellungen hatte ich hinzufügen:

Problem

CORS_ALLOW_CREDENTIALS= True 

Answer 3

Sie Middleware bestellen. Versuchen Sie, diese

MIDDLEWARE = [ 
    'django.contrib.sessions.middleware.SessionMiddleware', 
    'corsheaders.middleware.CorsMiddleware', 
    'django.middleware.common.CommonMiddleware', 
    'django.middleware.csrf.CsrfViewMiddleware', 
    'django.contrib.auth.middleware.AuthenticationMiddleware', 
    'django.contrib.messages.middleware.MessageMiddleware', 
    'django.middleware.clickjacking.XFrameOptionsMiddleware', 
    'django.middleware.security.SecurityMiddleware', 
] 

Beachten Sie, dass CorsMiddleware vor CommonMiddleware des Django kommen muss

Answer 4

Sie angular2 integrierten Proxy verwenden können.

1. erstellen proxy.conf.json Datei

2. in proxy.conf schreiben:

   { "/ api/Warenkorb /": { "Ziel": "http://localhost:8000", "sicher": false } }

3. in Ihrem package.json change "Start" Skript: "Start": "ng dient --proxy-config proxy.conf.json"

4. run "npm Start" in der Befehlszeile