-1

I'm trying to consume this endpoint at the api-football.com

Here is their documentation: https://www.api-football.com/documentation-beta#section/Authentication

The error is: Access to XMLHttpRequest at 'https://v3.football.api-sports.io/teams?id=40' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field x-rapidapi-host is not allowed by Access-Control-Allow-Headers in preflight response.

Here is my code:

    httpOptions.headers = new HttpHeaders({
     // 'Access-Control-Allow-Origin': '*',
     // 'Access-Control-Allow-Methods': 'GET',
     // 'Accept': '*/*',
     'Content-Type': 'application/json',
     'x-rapidapi-host': 'v3.api-football.com',
     'x-rapidapi-key': this._publicKey,
    });

    const url = 'https://v3.football.api-sports.io/teams?id=40';

    return this.http.get<any>(url, httpOptions)
     .pipe(
       catchError(this.handleError('getLiverpool', []))
    );

I understand what CORS is, but not how to fix it in this case? I am using Angular 9.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335
Mark
  • 2,543
  • 6
  • 33
  • 44
  • Does this answer your question? [XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header](https://stackoverflow.com/questions/35553500/xmlhttprequest-cannot-load-xxx-no-access-control-allow-origin-header) – Quentin May 28 '20 at 16:25

2 Answers2

0

Ehy!

the easiest solution would be to use your back-end as middleware to send the request to the 3rd party API. This and other more complex alternatives here

penguintheorem
  • 321
  • 1
  • 4
-1

the problem is the server, it needs to accept your request.

If once deployed they are going to be in the same server, you can disable cors in your browser, if not, you have to update the server

cucuru
  • 3,456
  • 8
  • 40
  • 74