Я получаю сообщение об ошибке 203 в Angular для подключения в Django Rest Api

Question

Мне нужна помощь, чтобы решить проблему. Я разрабатываю простую систему контактов, но я получаю некоторые ошибки, чтобы перечислить их. На Почтальоне я могу сделать CRUD с API.

На сервере я получаю это сообщение:

[08 / Jul / 2019 18:25:35] "GET / api / contato / HTTP / 1.1" 200 230

Это мой contato.service.ts

import { Injectable } from '@angular/core'; import { environment } from '../../environments/environment'; import { HttpClient } from '@angular/common/http'; import { Contato } from '../interfaces/contato'; import { Observable } from 'rxjs';

@Injectable({   providedIn: 'root' }) export class ContatoService {

  constructor(private http: HttpClient) { }

  getListaContatos(): Observable <Contato[]> {
    const url = `${environment.contatoApiUrl}/contato/`;
    return this.http.get<Contato[]>(url);   }

  getContato(id: number): Observable <Contato[]> {
    const url = `${environment.contatoApiUrl}/contato/${id}`;
    return this.http.get<Contato[]>(url);   }

  addContato(contato: Contato): Observable <Contato[]> {
    const url = `${environment.contatoApiUrl}/contato/`;
    return this.http.post<Contato[]>(url, contato);   }

  atualizaContato(contato: Contato): Observable <Contato[]> {
    const url = `${environment.contatoApiUrl}/contato/${contato.id}`;
    return this.http.put<Contato[]>(url, contato);   }

  deletaContato(id: number): Observable <Contato[]> {
    const url = `${environment.contatoApiUrl}/contato/${id}`;
    return this.http.delete<Contato[]>(url);   }

}

Это мой lista-contato.component.ts

import { Component, OnInit, ViewChild } from '@angular/core'; import { Contato } from '../../interfaces/contato'; import { ContatoService } from '../../services/contato.service'; import { ErrorMsgComponent } from '../../compartilhado/error-msg/error-msg.component';

@Component({   selector: 'app-lista-contato',   templateUrl: './lista-contato.component.html',   styleUrls: ['./lista-contato.component.css'] }) export class ListaContatoComponent implements OnInit {   public contatos: Contato[];   @ViewChild(ErrorMsgComponent, {static: false}) errorMsgComponent: ErrorMsgComponent;

  constructor(private contatoService: ContatoService) { }

  ngOnInit() {
    this.getListaContatos();   }

  getListaContatos() {
    this.contatoService.getListaContatos()
      .subscribe((contatos: Contato[]) => {
        this.contatos = contatos;
      }, () => { this.errorMsgComponent.setError('Falha ao buscar contatos.' ); });   }

  deletaContato(id: number) {
    this.contatoService.deletaContato(id)
      .subscribe(() => {
        this.getListaContatos();
      }, () => { this.errorMsgComponent.setError('Falha ao deletar contatos.'); });   }

  existemContatos(): boolean {
    return this.contatos && this.contatos.length > 0;   }

}

Ошибки с консоли

ListaContatoComponent.html: 8 ОШИБКА TypeError: Невозможно прочитать свойство 'id' из неопределенного в Object.eval [as updateDirectives] (ListaContatoComponent.html: 12) в Object.debugUpdateDirectives [as updateDirectives] (core.js: 39358) в checkAndUpdateView (core.js: 38370) в callViewAction (core.js: 38736) в execComponentViewsAction (core.js: 38664) в checkAndUpdateView (core.js: 38377) в callViewAction (core.js: 38736) в execEmbeddedViewsAction (core.js: 38693) в checkAndUpdateView (core.js: 38371) в callViewAction (core.js: 38736) View_ListaContatoComponent_0 @ ListaContatoComponent.html: 8

Дополнительная ошибка:

Доступ к XMLHttpRequest по 'http://127.0.0.1:8000/api/contato/' от origin 'http://127.0.0.1:4200' заблокирован политикой CORS: Нет Заголовок «Access-Control-Allow-Origin» присутствует в запрошенном ресурс.

Answer 1

Ваш Django API должен разрешать запросы от http://127.0.0.1:4200.Прочтите документацию Django на CORS о том, как это сделать.Вам также может быть интересно, что такое CORS ?

Answer 2

Спасибо большое, сработало.

Но правильный синтаксис:

CORS_ORIGIN_WHITELIST = [
     "http://127.0.0.1:4200" ]

И проблема с «ОШИБКА TypeError: Невозможно прочитать свойство 'id' из неопределенного", заключалась в том, что свойство было вне FOR.

Теперь все в порядке ..

Спасибо

Answer 3

Вам нужно использовать cors, как сказал @Noremac.Пример из документации !как ты это делаешь в Джанго

Установите cors с помощью команды pip install django-cors-headers.

Затем в свой файл settings.py добавьте его в INSTALLED_APPS:

INSTALLED_APPS = [
    # I assume there are some other apps here...
    'corsheaders',
]

Затем включите в СРЕДНЕГО ОБЕСПЕЧЕНИЯ:

MIDDLEWARE  = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'corsheaders.middleware.CorsMiddleware',
    # others middlewares bellow
] 

Внимание к вышеприведенному, потому что строка с коршерами должна быть перед любым промежуточным ПО, которое может генерировать ответы, например CommonMiddleware и т. Д., документация об этом здесь !.
Тогдав конце файла settings.py вы можете добавить CORS_ORIGIN_ALLOW_ALL = True или добавить желаемый источник:

CORS_ORIGIN_WHITELIST = (
    '127.0.0.1:8000'
)

Answer 4

Ошибка в консоли Google Chrome

ListaContatoComponent.html:8 ERROR TypeError: Cannot read property 'id' of undefined
    at Object.eval [as updateDirectives] (ListaContatoComponent.html:12)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:39358)
    at checkAndUpdateView (core.js:38370)
    at callViewAction (core.js:38736)
    at execComponentViewsAction (core.js:38664)
    at checkAndUpdateView (core.js:38377)
    at callViewAction (core.js:38736)
    at execEmbeddedViewsAction (core.js:38693)
    at checkAndUpdateView (core.js:38371)
    at callViewAction (core.js:38736)
View_ListaContatoComponent_0 @ ListaContatoComponent.html:8

Доступ к XMLHttpRequest по адресу http://127.0.0.1:8000/api/contato/' из origin 'http://127.0.0.1:4200' заблокирован политикой CORS: Нет Заголовок «Access-Control-Allow-Origin» присутствует в запрошенном ресурс.