[SOLVED] How can i Make a fetch function to get json data from an api that requires authentication headers?

How can i Make a fetch function to get json data from an api that requires authentication headers?

I am using rapidapi to get some data from a football app but can understand why this throw this error.

I have tried this code but it doesnt work, this shows this type of error

Response { type: "cors", url: "https://soccer-livescore.p.rapidapi.com/v1/global/getleague?league=Indo%20D3", redirected: false, status: 403, ok: false, statusText: "Forbidden", headers: Headers, body: ReadableStream, bodyUsed: false }

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

@Component({
  selector: 'app-matches',
  templateUrl: './matches.page.html',
  styleUrls: ['./matches.page.scss'],
})
export class MatchesPage implements OnInit {

  constructor(public http: HttpClient){}

  ngOnInit() {


fetch("https://soccer-livescore.p.rapidapi.com/v1/global/getleague?league=Indo%20D3", {
    "method": "GET",
    "headers": {
        "x-rapidapi-host": "soccer-livescore.p.rapidapi.com",
        "x-rapidapi-key": "not showing my rapid key"
    }
})

.then(response => {
    console.log(response);
})
.catch(err => {
    console.log(err);
});
  }

}

Solution

You need to sign up to RapidAPI to use an API from RapidAPI Hub.

Then, to use an API, you need to subscribe to a particular plan. The majority of APIs are free on RapidAPI Hub.

I believe you're using Soccer Livescore API; go to its pricing page and subscribe to a plan that's best suited for you.