Angular не получает данные, когда браузер и почтальон

Question

У меня есть API, разработанный в Django Rest Framework, который работает при вызове в моем браузере и с почтальоном, но выдает ответ "(Failed)" при вызове в Angular. Не выдает код ответа (например, 404)

В журнале консоли он заявляет, что это из-за CORS, но тот же браузер позволяет затем вызывать его напрямую.

Получение:

Access to XMLHttpRequest at 'http://localhost:8000/article/articletype' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

Я знаю из консоли Django, что вызов выполняется успешно, так как он дает ответ 200.

Я пытался разрешить CORS обходить с обоих концов, добавляя заголовки к угловым вызовам. Ниже приведен контроль доступа, который я разрешил. Я также играл с разными типами контента и акцептами (был text / html), но теперь выглядел как *

'Accept' : '*/*' , 'Content-Type': '*' , 'Access-Control-Allow-Origin':'*', 'Access-Control-Allow-Headers':'*'

Для Django я добавил плагин 'corsheaders' с CORS_ORIGIN_ALLOW_ALL = True

Я также попытался вернуть HttpResponse JSON и JsonResponse в Django.

В Django RFW:

В настоящее время код выглядит следующим образом, но я пробовал много разных итераций

jresponse = {
        "id" : 2,
        "text" : response,
        "prev_button" : "...prev",
        "subject1" : "SomeSub",
        "stage" : "SomeStage",
        "type1" : "SomeType1",
        "type2" : "SomeType2",
        "subject_list" : ["Sub1","Sub2","Sub3","Sub4"],
        "stage_list" : ["Stage1","Stage2","Stage3","Stage4"],
        "type1_list" : ["Type1.1","Type1.2", "Type1.3","Type1.4"],
        "type2_list" : ["Type2.1","Type2.2","Type2.3","Type2.4"],
    }

    jr=json.dumps(jresponse)
    jr['Access-Control-Allow-Origin'] = '*'
    jr['Access-Control-Allow-Headers'] = '*'
    # jr = serialize('json', response) # Tried this, didn't work
    # return JsonResponse(jresponse) # Tried this, didn't work
    return HttpResponse(jresponse) # I have also tried returning the 'jr' variable

При всех своих итерациях я обычно получаю ответ вbrowser.

Для Angular:

  getArticles() { 
    let add = 'http://localhost:8000/page/'.concat(this.articleid);
    this.http.get(add, 
      {headers : { 'Accept' : '*/*' , 'Content-Type': '*' , 'Access-Control-Allow-Origin':'*', 'Access-Control-Allow-Headers':'*' }}
      ).subscribe(
      article => { this.article = article;
        console.log(this.article)
      })

Как уже упоминалось до того, как Accept и Content-Type прошли через мельницу.

Я хочу, чтобы Angular получил объект Json дляЯ могу использовать в шаблоне

например: {{article.subject}}

Answer 1

Обновлены ваши настройки, такие как:

Сначала добавьте свой угловой URL к allowed hosts

ALLOWED_HOSTS = ['localhost', '127.0.0.1', 'other IP of servers']

, а затем проверьте middleware настройки, такие как:

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

А затем добавьте следующие настройки:

CORS_ALLOW_CREDENTIALS = True
ACCESS_CONTROL_ALLOW_HEADERS = True
CORS_ORIGIN_ALLOW_ALL = True


CORS_ORIGIN_WHITELIST = (
    'localhost:4200',
    'localhost:8000',
    '127.0.0.1:8000',
    'other IPs'
)

CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
)

CSRF_TRUSTED_ORIGINS = (
    '127.0.0.1:9200',
    'localhost:9200',
    'other IPs'
)

CORS_ALLOW_HEADERS = (
    'accept',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
)

У меня возникла такая же проблема с angular, а затем я добавил настройки, как указано выше, тогда это сработало.