Javascript 在客户端从API获取数据而不提供密钥

目前，我正在制作一个显示从API收集的数据的页面。大多数数据每4小时在服务器端更新一次，但有些数据在客户机请求索引路由时更新。因此，由于需要更新数据，发送的索引文件会有延迟。我想在请求并发送页面后收集更新的数据，这样就不会有延迟。我的第一个想法是在客户端发出请求，客户端将在收集数据后处理更新显示，但据我所知，如果不给他们API密钥，我不知道如何做到这一点。我应该这样处理问题，还是有更好的方法？我使用Express作为后端，Axios用于发出get请求，EJS是模板引擎

代码如下：

// This is called before the data is send in a for loop
data.gameData[i].player_count = await SteamModule.liveGetCurrentPlayers(data.gameData[i].appid);

res.render('index', {data: data});

// This is the function that is called
liveGetCurrentPlayers: async (id) => {
    const res = await axios.get(`${base}/ISteamUserStats/GetNumberOfCurrentPlayers/v1/?key=${key}&appid=${id}`, {timeout: 1000}).catch(err => {
        Logger.error("Error getting updated user data per request");
        return 'Error';
    });
    if(res.data) {
        return res.data.response.player_count;
    } else {
        return 'Error';
    }
}

---

您可以在服务器端维护密钥，并添加限制，即这些API只能通过客户端URL访问。因此，您将访问API，它将维护您的会话并处理授权的密钥部分

如果在浏览器中运行，客户端上的任何内容都可以访问

---

您可以在服务器上添加安全措施，但不能在客户端添加安全措施来保护您的密钥。

您可以在服务器端维护您的密钥，并添加仅可通过客户端URL访问这些API的限制。因此，您将访问API，它将维护您的会话并处理授权的密钥部分

如果在浏览器中运行，客户端上的任何内容都可以访问

---

您可以在服务器上添加安全措施，但不能在客户端添加安全措施来保护您的密钥。

这里有一张图来解释我在评论中所说的

（您显示的代码应该不断更新-没有其他信息，我无法帮助解决其他问题，但这是总体思路……）

其中：

客户端向您（您的服务器）请求数据

您的服务器发送html和css以显示页面的“框架”（没有数据，只是让他们看到并感觉到发生了什么…）

您的服务器从API服务器请求数据（您所说的所有“20-ish”内容）

随着数据的更新（或者您可能已经拥有了数据），您将数据发送到客户端，用当前数据更新其“框架”页面

---

这里有一张图来解释我在评论中说的话

（您显示的代码应该不断更新-没有其他信息，我无法帮助解决其他问题，但这是总体思路……）

其中：

客户端向您（您的服务器）请求数据

您的服务器发送html和css以显示页面的“框架”（没有数据，只是让他们看到并感觉到发生了什么…）

您的服务器从API服务器请求数据（您所说的所有“20-ish”内容）

随着数据的更新（或者您可能已经拥有了数据），您将数据发送到客户端，用当前数据更新其“框架”页面

---

最简单的方法是在中间添加一个第二个服务器，然后你可以为客户端制作自己的API密钥，并经常更新数据。“CFP支持如果第二个服务器不是一个选项会怎么样？我会非常震惊！如果您可以从客户端拉取数据并得到您想要的，那么您需要向我解释如何在中间创建一个“服务器”（这对服务器来说就像S客户机，并存储更多的当前数据，然后将数据发送给客户请求它）。您应该发布一些代码和/或至少是您现在正在收集和提供的信息流。@CFP支持我是web开发新手，所以我可能没有很好地解释我要做的事情。我从API请求的信息需要每4小时收集一次，或者每当用户想要查看页面时收集一次。每4小时更新一次的数据存储在我自己的数据库中，可以快速访问。每当用户想要查看页面时收集的数据都会导致延迟，因为它必须在向客户端发送页面之前发出10-20个请求。我不想在发送页面之前发出请求，而是想先发送页面，然后在客户端或服务器端发出10-20个请求，听起来像是（同样，代码有帮助……）你想“绘制页面”（这样客户端可以看到东西——虽然不是数据，但有“快速加载”的感觉……），然后加载数据。这是一个很好的设计，通过加载最小的css和html来显示数据的“框架”，然后使用ajax/javascript加载这20个ish请求，这样做非常简单。如果你是这么说的话，然后显示你尝试过的代码和你看到慢度的地方——然后更容易帮助你。最简单的方法是在中间添加第二个服务器——然后你可以为客户端制作自己的API密钥，并经常更新“经常更新的数据”。如果您可以从客户端拉取数据并得到您想要的，那么您需要向我解释如何在中间创建一个“服务器”（这对服务器来说就像S客户机，并存储更多的当前数据，然后将数据发送给客户请求它）。您应该发布一些代码和/或至少是您现在正在收集和提供的信息流。@CFP支持我是web开发新手，所以我可能没有很好地解释我要做的事情。我从API请求的信息需要每4小时收集一次，或者每当用户想要查看页面时收集一次。每4小时更新一次的数据存储在我自己的数据库中，可以快速访问。每当用户想要查看页面时收集的数据都会导致延迟，因为它必须在之前发出10-20个请求