Error Angular + Django Rest Api

Django

Angular

REST

API

08/07/2019

boa tarde,

Estou precisando de uma ajuda, estou desenvolvendo uma agenda de contatos básica, porém esta dando alguns erros ao listar os contatos. No postman eu consigo fazer o CRUD com a api.

No server eu recebo a mensagem:

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


-- Erros do console do 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)




ERROR CONTEXT DebugContext_ {view: {…}, nodeIndex: 9, nodeDef: {…}, elDef: {…}, elView: {…}}


Access to XMLHttpRequest at ''''http://127.0.0.1:8000/api/contato/'''' from origin ''''http://127.0.0.1:4200'''' has been blocked by CORS policy: No ''''Access-Control-Allow-Origin'''' header is present on the requested resource.



=================

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/$`;
    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/$`;
    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;
  }

}
Fernando

Fernando

Curtidas 0

Respostas

Fernando

Fernando

08/07/2019

Consegui a resposta no Stackoverflow, vou postar aqui caso alguém precise.

Quanto ao erro de property id era porque a propriedade estava fora do *ngFor no arquivo html.


Sobre o erro 203:

No django:
- Instale o cors com o comando 
pip install django-cors-headers



No arquivo settings.py, adiciona no INSTALLED_APPS:
INSTALLED_APPS = [
    # I assume there are some other apps here...
    'corsheaders',
]


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


Acrescente ainda no arquivo settings.py
ORS_ORIGIN_WHITELIST = [
     "http://127.0.0.1:4200" ]



GOSTEI 0
POSTAR