0
Provided an API that returns the following JSON:
{
"ResponseStatus": {
"ResponseCode": 0,
"ResponseMessage": "Success."
},
"Events": [
{
"CodEspec": 65957,
"NomeEspec": "O PIOR ESPETÁCULO DO MUNDO",
"DiaHoraEspecs": [
"2019-05-09T21:30:00",
"2019-05-10T21:30:00",
"2019-05-25T21:30:00"
]
}
]
}
I am developing the front end in Angular and for this purpose I created this model: Event.ts
export class Event{
CodEspec: number;
NomeEspec: string;
DiaHoraEspecs: Date[];
}
I also created a service to get JSON with the following functionality:
getEventos():Observable<Event[]>{
//get todos os eventos
return this.http.get<Event[]>(`${this.ticketlineUrl}`);
}
Then in the component called event I called the service and the GET to return the reply and then show.
Events.component.ts
export class EventsComponent implements OnInit {
events: Event[];
constructor(private ticketlineservice: TicketlineService) { }
ngOnInit() {
this.ticketlineservice.getEventos().subscribe(events => {
this.events = events;
});
}
}
Events.component.html
<div>
<ul *ngFor="let event of events">
<li>Evento: {{ event.title }}
{{ event.CodEspec }}
{{ event.NomeEspec }}
{{ event.DiaHoraEspecs }}
</li>
</ul>
</div>
Problem: Shows no information, and the console shows the following errors:
Access to XMLHttpRequest at from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "", ok: false, …}
Cross-Origin Read Blocking (CORB) blocked cross-origin response with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.
I’ve used a Chrome extension that solves the Access-Control-Allow-Origin problem, but CORB stands and shows no information.
you have to enable Cors in your backend
– Eduardo Vargas
The back-end is not mine, I wanted an option to test the front-end.
– Luis Luis Maia Maia