Failed to load resource: the server responded with a status of 403 () received from a JS embedded in an HTML when trying to access a public API

This API is public, access is free as you can see:
https://prod-public-api.livescore.com/v1/api/react/date/soccer/20210803/1.00

But when I run my HTML, in the Chrome console the error appears:

Failed to load resource: the server responded with a status of 403 ()

What should I do?

Here is my script code that creates a drop down box with the data collected from this API:

var $select = $('#matches');

$.getJSON('https://prod-public-api.livescore.com/v1/api/react/date/soccer/20210803/1.00',function(data){
    $select.html('');
    $select.append('<option id="DropDownBox">' + "Escolher Jogo" + '</option>')

    for (var i = 0; i < data['Stages'].length; i++) {
        for (var z = 0; z < data['Stages'][i]['Events'].length; z++) {
            $select.append('<option id="' + data['Stages'][i]['Events'][z]['Eid'] + '" data-stages="' + i + '" data-events="' + z + '">' + data['Stages'][i]['Events'][z]['T1'][0]['Nm'] + " v " + data['Stages'][i]['Events'][z]['T2'][0]['Nm'] + '</option>')
        }
    }
});

Note:

To run my HTML I use Live Server (Visual Studio Code extension) and to release CORS to access external link, I use the extension to Chrome access-control-allow-origin (https://mybrowseraddon.com/access-control-allow-origin.html)

Solution

If you go to https://prod-public-api.livescore.com in your browser then their server is receiving that specific domain as making the request, they've whitelisted their own domain to be able to make requests.

When you're on https://example.com and you try to fetch('https://prod-public-api.livescore.com...') it will get CORS rejected because now their server is receiving "https://example.com" as the requesting domain.

The 403 you're getting is because of being CORS rejected.

You can create your own API and fetch data data server side and then call your own API to get it.