加载资源失败：当尝试访问 public API 时，服务器响应从 HTML 中嵌入的 JS 收到的状态 403 ()

Question

这个API是public，如您所见，访问是免费的：
https://prod-public-api.livescore.com/v1/api/react/date/soccer/20210803/1.00

但是当我运行我的 HTML 时，在 Chrome 控制台中出现错误：

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

我该怎么办？

这是我的脚本代码，它使用从 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>')
        }
    }
});

注：

至运行我的 HTML 我使用 Live Server（Visual Studio 代码扩展）并发布 CORS 以访问外部 link，我使用扩展 Chrome 访问控制允许来源 (https://mybrowseraddon.com/access-control-allow-origin.html)

Answer 1

如果您在浏览器中转到 https://prod-public-api.livescore.com，那么他们的服务器会在发出请求时接收该特定域，他们已将自己的域列入白名单以便能够发出请求。

当您在 https://example.com 上并尝试 fetch('https://prod-public-api.livescore.com...') 时，CORS 将被拒绝，因为现在他们的服务器正在接收“https://example.com”作为请求域.

您得到的 403 是因为被 CORS 拒绝。

您可以创建自己的 API 并在数据服务器端获取数据，然后调用您自己的 API 来获取它。

加载资源失败：当尝试访问 public API 时，服务器响应从 HTML 中嵌入的 JS 收到的状态 403 ()

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

html

javascript

api

json

liveserver