Django REST API Rückgabe Keine Header 'Access-Control-Allow-Origin' vorhanden mit Angular 4

Question

Ich habe eine Django REST API mit dem Django REST-Framework eingerichtet, und ich versuche, über eine Angular 4 Front- Ende. Ich bekomme immer einen Fehler, der besagt, dass auf der angeforderten Ressource kein Header 'Access-Control-Allow-Origin' vorhanden ist. "

Ich habe versucht, Django-Kors-Header zu installieren, aber es scheint nichts zu tun. Ich denke, dass meine REST-API möglicherweise falsch eingerichtet ist.

settings.py

""" 
Django settings for weather project. 

Generated by 'django-admin startproject' using Django 1.9. 

For more information on this file, see 
https://docs.djangoproject.com/en/1.9/topics/settings/ 

For the full list of settings and their values, see 
https://docs.djangoproject.com/en/1.9/ref/settings/ 
""" 

import os 

# Build paths inside the project like this: os.path.join(BASE_DIR, ...) 
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__))) 


# Quick-start development settings - unsuitable for production 
# See https://docs.djangoproject.com/en/1.9/howto/deployment/checklist/ 

# SECURITY WARNING: keep the secret key used in production secret! 
SECRET_KEY = 'not_telling' 

# SECURITY WARNING: don't run with debug turned on in production! 
DEBUG = True 

ALLOWED_HOSTS = ['127.0.0.1:4200'] 


# Application definition 

INSTALLED_APPS = [ 
    'django.contrib.admin', 
    'django.contrib.auth', 
    'django.contrib.contenttypes', 
    'django.contrib.sessions', 
    'django.contrib.messages', 
    'django.contrib.staticfiles', 
    'rest_framework', 
    'corsheaders', 
    'weatherstats', 
] 

MIDDLEWARE_CLASSES = [ 
    'django.middleware.common.BrokenLinkEmailsMiddleware', 
    'django.middleware.security.SecurityMiddleware', 
    'django.contrib.sessions.middleware.SessionMiddleware', 
    'django.middleware.common.CommonMiddleware', 
    'django.middleware.csrf.CsrfViewMiddleware', 
    'django.contrib.auth.middleware.AuthenticationMiddleware', 
    'django.contrib.auth.middleware.SessionAuthenticationMiddleware', 
    'django.contrib.messages.middleware.MessageMiddleware', 
    'django.middleware.clickjacking.XFrameOptionsMiddleware', 
] 

CORS_ORIGIN_ALLOW_ALL = False 

CORS_ORIGIN_WHITELIST = (
    'localhost:4200', 
) 

ROOT_URLCONF = 'weather.urls' 

TEMPLATES = [ 
    { 
     'BACKEND': 'django.template.backends.django.DjangoTemplates', 
     'DIRS': [], 
     'APP_DIRS': True, 
     'OPTIONS': { 
      'context_processors': [ 
       'django.template.context_processors.debug', 
       'django.template.context_processors.request', 
       'django.contrib.auth.context_processors.auth', 
       'django.contrib.messages.context_processors.messages', 
      ], 
     }, 
    }, 
] 

WSGI_APPLICATION = 'weather.wsgi.application' 


# Database 
# https://docs.djangoproject.com/en/1.9/ref/settings/#databases 

DATABASES = { 
    'default': { 
     'ENGINE': 'django.db.backends.sqlite3', 
     'NAME': os.path.join(BASE_DIR, 'db.sqlite3'), 
    } 
} 


# Password validation 
# https://docs.djangoproject.com/en/1.9/ref/settings/#auth-password-validators 

AUTH_PASSWORD_VALIDATORS = [ 
    { 
     'NAME': 'django.contrib.auth.password_validation.UserAttributeSimilarityValidator', 
    }, 
    { 
     'NAME': 'django.contrib.auth.password_validation.MinimumLengthValidator', 
    }, 
    { 
     'NAME': 'django.contrib.auth.password_validation.CommonPasswordValidator', 
    }, 
    { 
     'NAME': 'django.contrib.auth.password_validation.NumericPasswordValidator', 
    }, 
] 


# Internationalization 
# https://docs.djangoproject.com/en/1.9/topics/i18n/ 

LANGUAGE_CODE = 'en-us' 

TIME_ZONE = 'UTC' 

USE_I18N = True 

USE_L10N = True 

USE_TZ = True 


# Static files (CSS, JavaScript, Images) 
# https://docs.djangoproject.com/en/1.9/howto/static-files/ 

STATIC_URL = '/static/' 

bin ich etwas fehlt?

Answer 1

Sie werden auch CorsMiddleware Klasse hören auf Antworten hinzufügen müssen:

MIDDLEWARE_CLASSES = [ 
    ... 
    'corsheaders.middleware.CorsMiddleware', 
    'django.middleware.common.CommonMiddleware', 
    ... 
] 

CorsMiddleware sollte so hoch wie möglich platziert werden, vor allem vor jeder Middleware, die WhiteNoiseMiddleware Antworten wie Djangos CommonMiddleware oder Whitenoise des erzeugen kann. Wenn es nicht vorher ist, wird es nicht in der Lage sein, die CORS Header zu diesen Antworten hinzuzufügen.

Referenz: https://github.com/ottoyiu/django-cors-headers