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

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?

Thinker · Accepted Answer · 2016-11-06 14:20:50Z

1

In my Django settings I had to add:

CORS_ALLOW_CREDENTIALS= True

answered Nov 6, 2016 at 14:20

Thinker

5,39615 gold badges70 silver badges143 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Günter Zöchbauer · Accepted Answer · 2016-11-06 13:59:15Z

0

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.

answered Nov 6, 2016 at 13:59

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

2 Comments

Thinker Over a year ago

Okay, where and how do I add this in my request?

Günter Zöchbauer Over a year ago

There is nothing to do on the request. The browser expects this in the resposne header in the response from the server. I don't know Django and how to configure it.

itzMEonTV · Accepted Answer · 2016-11-06 14:37:02Z

0

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

answered Nov 6, 2016 at 14:37

itzMEonTV

20.4k4 gold badges44 silver badges53 bronze badges

Comments

michali · Accepted Answer · 2016-11-06 15:04:50Z

0

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

answered Nov 6, 2016 at 15:04

michali

3,9724 gold badges21 silver badges20 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related