angular2: origin 'http://localhost:3000' is therefore not allowed access - django

Question

I have a django backend and I have enabled Cross origin requests as follows:
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
I haven't implemented any authentication. I simply am trying to hit an API endpoint and trying to fetch data on my Angular2 frontend.
I have implemented a session based cart in Django backend which stores my products (https://github.com/lazybird/django-carton). When I hit http://127.0.0.1:8000/api/shopping-cart/show/ through my browsable api it gives me
{"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}}
However when I try to hit the same url from my Angular2 service: it throws me error:
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.
My service call is as follows:
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())
}
Note: If I remove {withCredentials:true} then it does not send sessionid or csrftoken and returns {} but the error vanishes. What am I doing wrong?

Answer 1

In my Django settings I had to add:
CORS_ALLOW_CREDENTIALS= True

Answer 2

AFAIK if you use withCredentials: true you can't use * for Access-Control-Allow-Origin but need http://localhost:3000 instead.
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 3

You middleware order problem. Try this
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',
]
Note that CorsMiddleware needs to come before Django's CommonMiddleware

Answer 4

You can use angular2 integrated proxy.
create proxy.conf.json file
in proxy.conf write:
{
"/api/shopping-cart/": {
"target": "http://localhost:8000",
"secure": false
}
}
in your package.json change "start" script to:
"start": "ng serve --proxy-config proxy.conf.json"
run "npm start" in your command line