Django Angular cors error: access-control-allow-origin not allowed

Question

I have implemented auth in my django app using django-rest-auth. My settings in settings.py:

ALLOWED_HOSTS = []

# Application definition

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'rest_framework',
    'rest_framework.authtoken',
    'rest_auth',
    'django.contrib.sites',
    'allauth',
    'allauth.account',
    'rest_auth.registration',
    'corsheaders',
    'rest_framework_docs',
    'tasks'
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.security.SecurityMiddleware',
    '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',
]

ROOT_URLCONF = 'urls'
CORS_ORIGIN_ALLOW_ALL = True
CORS_ALLOW_CREDENTIALS = True
ALLOWED_HOSTS = ['*']

SITE_ID = 1

I am logged in from my frontend- I receieved a token with I have stored in my local storage. Now I making a simple GET request like following:

  getTasks(): Observable<Task[]> {

    let headers = new Headers({ 'Access-Control-Allow-Origin': '*' });
    let options = new RequestOptions({ headers: headers, withCredentials: true  });

    return this.http.get(this.taskUrl, options)
    .map(this.extractData)
    .catch(this.handleError);
  }

But it gives me : Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response. although I am including withCredentials.

What am I doing wrong?

P.S: If I remove options from POST then there is no error but I get incorrect data because my backend returns data for a specific user.

score 7 · Accepted Answer · answered Jul 22 '17 at 15:48

7

Remove this line,

let headers = new Headers({ 'Access-Control-Allow-Origin': '*' });

from your getTasks() function. You don't need to specify those options to the server. django-cors-headers takes care of that.

answered Jul 22 '17 at 15:48

zaidfazil

9,017
2
24
47

It did work, but why exactly? I always used to add headers and credentials before! – Thinker Jul 22 '17 at 15:49
1

Django rejects any requests with the `Access-Control-Allow-Origin` option in the header. You don't need to explicitly provide it. – zaidfazil Jul 22 '17 at 15:50
2

The client sends a Access-Control-Request-Headers to request allowing certain headers, the server responds back with with a Access-Control-Allow-Headers that lists the actual headers its going to allow. The client does not get to demand what headers are allowed. – zaidfazil Jul 22 '17 at 15:54
Okay I understand now :) Thanks for explaining! – Thinker Jul 22 '17 at 16:01
Would you please do me a favour and tag the answer as selected, then? – zaidfazil Jul 23 '17 at 04:41
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/149921/discussion-between-nitish-and-zaidfazil). – Thinker Jul 23 '17 at 09:05
Sure! I just forgo totally – Thinker Jul 23 '17 at 09:05

Django Angular cors error: access-control-allow-origin not allowed

1 Answers1

Linked