1

I'm building a ionic+angular app for listing euromillions results, and I'm trying get data by external api, I don't want to use a server, it's just for listing the api results, but I'm getting the cors block, and I dont know how to resolve this, can someone help me? Thanks

lotteries.service.ts

import { Injectable } from '@angular/core';
import { HttpClientModule, HttpClient } from '@angular/common/http';
import { Euromillions } from './lottery.model';


@Injectable({
    providedIn: 'root'
})
export class LotteriesService {
    private euromillions: Euromillions[] = [
        {
            id: 'r1',
            numbers: '6-14-22-37-45',
            stars: '3-7',
            draw_info: 'Sorteio Nº076, 22-10-2019'
        }
    ];
    constructor(private httpService: HttpClient) { }

    getLastEuromillions() {
        return [...this.euromillions];
    }

    getApi() {

        return this.httpService.get('https://nunofcguerreiro.com/api-euromillions-json');
    }
}

lotteries.page.ts

import { Component, OnInit } from '@angular/core';

import { Euromillions } from './lottery.model';
import { LotteriesService } from './lotteries.service';

@Component({
  selector: 'app-lotteries',
  templateUrl: './lotteries.page.html',
  styleUrls: ['./lotteries.page.scss'],
})
export class LotteriesPage implements OnInit {
  euromillions: Euromillions[];

  constructor(private lotteriesService: LotteriesService) { }

  ngOnInit() {
    this.lotteriesService.getApi().subscribe((data)=>{
      console.log(data);
    }
    )};
}

image error

sao
  • 1,835
  • 6
  • 21
  • 40
Marcelo Cruz
  • 21
  • 1
  • 3

2 Answers2

1

The external browser blocks your request. you have two choices. either using the back-end to receive the request and redirect it. Or the API owner allows the cross-origin. read this link for more details mozila reference

Ali Abbas
  • 1,415
  • 12
  • 19
1

API Gateway from AWS will help you solve this all day long.

When you run an HTTP request it's a good practice to call a module from the back end (with js/node) this will get you around the CORS issue. but why set up a server/back-end when you can use AWS for it.

with a few extra steps you can make an API that passes the request and then call that from your browser where it will send your page a cross domain allowed response.

see my other answer here: How to retrieve cross origin volcanic data in xml?

sao
  • 1,835
  • 6
  • 21
  • 40
  • 1
    wow man this works very well so easy to do thanks very much super easy solution :D – Marcelo Cruz Sep 21 '19 at 12:15
  • cool, yeah i know. make sure to mark the question as the answer if it solved the problem, just click the check-mark. best! – sao Sep 21 '19 at 13:19