I am working with football-data API, everything worked great until recently when I noticed that my webpage is missing data from the API…
here is the example of my code (had to omit my token):

urlMatches = `https://api.football-data.org/v4/competitions/PD/matches?status=FINISHED`;

async function getMatches() {
  const response = await fetch(urlMatches, {
    method: "GET",
    headers: {
      "X-Auth-Token": "xxxxx",
    },
  });
  const data = await response.json();
  console.log(data);
}

getMatches();

and here are the errors I get:

Access to fetch at ‘https://api.football-data.org/v4/competitions/PD/matches?status=FINISHED’ from origin ‘http://127.0.0.1:5501’ has been blocked by CORS policy:

Response to preflight request doesn’t pass access control check:

The ‘Access-Control-Allow-Origin’ header has a value ‘http://localhost’ that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

script1.js:4

GET https://api.football-data.org/v4/competitions/PD/matches?status=FINISHED net::ERR_FAILED

getMatches @ script1.js:4
(anonymous) @ script1.js:14
script1.js:4

   Uncaught (in promise) TypeError: Failed to fetch  
at getMatches (script1.js:4:26)  
at script1.js:14:1

This very same code worked perfectly with version 2 and 3 until recently; both on my local machine and online.

When I noticed that my webpage is missing data, I changed endpoint to v4 of this API, but I still get the same error messages. I tried to change mode to no-cors but nothing changed.

Why this suddenly stopped working and what should I do to fix it?