使用 Headers 获取数据时出错（没有 return）

Question

我正在尝试使用 API (https://tracker.gg/developers/docs/titles/csgo)，但它无法正常工作。当我尝试发出请求时，它会在获取内部请求 headers（从未使用过 headers，仅使用常规获取和 url）。做了一点搜索，我想到了：

async function fetchData() {

    const response = await fetch('https://public-api.tracker.gg/v2/csgo/standard/profile/steam/76561198008049283', {
    method: 'GET',
    headers: {
        'TRN-Api-Key': 'XXXX-XXXXX-XXX-XXXXXX-XXX', //here goes the key that I got for this app.
        'Accept': 'application/json',
        'Accept-Encoding': 'gzip',
    },
    mode: 'no-cors',
   })
   const second = await response.json();
   console.log(second);
}

当我调用此函数时，我在控制台中收到两个错误：

获取 https://public-api.tracker.gg/v2/csgo/standard/profile/steam/76561198008049283 net::ERR_ABORTED 401
未捕获（承诺）语法错误：输入意外结束

我目前的知识太基础了，我想深入了解我所缺少的内容以及我可以做些什么来学习更多有关获取数据以及如何在需要时进行验证的知识（像身份验证密钥）

Answer 1

好吧，在修改了请求之后，我意识到一些本来应该很明显的事情...
您尝试发出的请求应该 NOT 出现在浏览器中除非你在 tracker.gg 的网站上。简而言之，您应该从您的应用程序 (server) 发出此请求。服务器到服务器对cors没有影响。

现在让我们深入了解为什么？首先，您的请求将不包括 'TRN-Api-Key' header，因为它不是 CORS-safelisted（正如 this 出色的答案告诉我们的那样）。基本上，当您发出获取请求时，它会删除未列入安全列表的 header，因此 'TRN-Api-Key' 从您的 header 请求中删除，并且不会转到 API。因此，为什么您会看到“没有发送 api 密钥”，因为它没有被发送。如果删除模式：'no-cors'，则密钥将被发送但 CORS 失败。如果您没有使用 cors，则必须在 tracker.gg 上提出请求以获得正确的 cors 站点。
因此该项目的开发人员认为（并且有充分的理由）您只会在服务器上发出此请求（这根本不是处理 api 密钥的安全方法front-end）。如果您改为使用 api 与他们的 api 一起工作，您的应用程序可以在不知道 api 密钥的情况下使用您自己的自定义服务器（当然使用某种形式的身份验证）。
简单地说，您的游戏服务器 有责任照管此 API 密钥并为您的应用程序的用户负责使用它。请阅读您尝试访问的 api 的文档（也请阅读该答案，因为它很有趣）。

最终答案：API 键应该按预期用于服务器到服务器的通信（不在浏览器中）。

使用 Headers 获取数据时出错（没有 return）

Error when fetching data with Headers (no return)

javascript

fetch