Problem Api League Of Legends with angular and / or Node

Good I wanted to practice a little the use of the external apis, that is, apis services not made by me so I found the api of League Of Legends that seems or seemed easy.

I find in the documentation the different url that the API provides to obtain the different data.

Then create a simple application in Angular , in my service that will communicate with the api I have the following:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

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

  API_KEY = "SECRETO";
  url_2:XMLHttpRequest;
  constructor(
    public http: HttpClient
  ) { }



  getPlayer(nombreJugador: string) {

    // let nombreJugador_tratado =nombreJugador.replace('' ,'%'); 
    let nombreJugador_tratado: string;

    let re = /\ /gi;
    nombreJugador_tratado = nombreJugador.replace(re, "%");




    console.log("-"+nombreJugador_tratado+"-");

    let url:string = 'https://euw1.api.riotgames.com/lol/summoner/v3/summoners/by-name/'+nombreJugador_tratado+'?api_key='+this.API_KEY;
    console.log('URL => '+url)

    this.http.get(url).subscribe(
      res => {
        console.log(res);
      },

      error => {
        console.log(error);
      }

    );

  }

}

Once this is done I get an error CORS indicating that the server that has the api does not allow external connections.

  Solicitud desde otro origen bloqueada: la política de mismo origen impide leer el recurso remoto en https://euw1.api.riotgames.com/lol/summoner/v3/summoners/by-name/lee%sin%mega?api_key=RGAPI-c1c8536d-10b4-410e-9e95-a3f0670ea0f4 (razón: falta la cabecera CORS 'Access-Control-Allow-Origin').[Saber más]
{…}
​
error: error { target: XMLHttpRequest, isTrusted: true, lengthComputable: false, … }
​
headers: Object { normalizedNames: Map(0), lazyUpdate: null, headers: Map(0) }
​
message: "Http failure response for (unknown url): 0 Unknown Error"
​
name: "HttpErrorResponse"
​
ok: false
​
status: 0
​
statusText: "Unknown Error"
​
url: null
​
<prototype>: Object { constructor: HttpErrorResponse()
 }

Deduction: The first thing is if the api service is foreign to me as I can put the server that allows the incoming connection from my application or that is running on my localhost.

If it were an api created by me I know that there are methods to allow the origin of the request made by a client, but if I access the server I have no idea how to put an access cors.

If someone has had the same problem or a similar problem I would like them to help me. Thanks.

Add also that I have tried with nodejs and at the time of making the request I would not know how to do it exactly, if someone knew how to approach what I have created I would be very grateful, I leave it to continuation:

router.get('/realApi/:nombreJugador',(req,res)=> {
    'https://euw1.api.riotgames.com/lol/summoner/v3/summoners/by-name/'+nombreJugador+'?api_key='+this.API_KEY;


});

PS: I know it's wrong but at an external address I have no idea, I also know that this string is hanging in the air.

++ ADDED 1 ++

  

Let's see, with a get method on my nodejs server that receives the name of the player with that address if I make an AJAX request it should work, I just need to know now how to execute a get request to that url. Thank you very much

getPlayer (PlayerName: string) {

// let nombreJugador_tratado =nombreJugador.replace('' ,'%'); 
let nombreJugador_tratado: string;

let re = /\ /gi;
nombreJugador_tratado = nombreJugador.replace(re, "%");




console.log("-"+nombreJugador_tratado+"-");

let url:string = 'https://euw1.api.riotgames.com/lol/summoner/v3/summoners/by-name/'+nombreJugador_tratado+'?api_key='+this.API_KEY;
console.log('URL => '+url)

this.http.get(url).subscribe(
  res => {
    console.log(res);
  },

  error => {
    console.log(error);
  }

);

}