在不提供密钥的情况下从客户端的API获取数据

Question

目前我正在制作一个显示从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';
    }
}

Answer 1

这里有一个图解来解释我在评论中所说的内容.....

（你展示的代码应该不断更新 - 没有其他信息我无法解决其他问题，但这是整体想法......）

哪里：

1. 客户端向您（您的服务器）请求数据
2. 你的服务器发送html和css来显示页面的“框架”（没有数据，只是让他们看到并感觉有些事情正在发生......）
3. 您的服务器从API服务器请求数据（您说要服务的所有各种“20-ish”内容......）
4. 随着数据的更新（或者您可能已经拥有），您将数据发送到客户端，使用当前数据更新其“框架”页面。

Answer 2

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

如果在浏览器中运行，则可以访问客户端上的任何内容和所有内容。

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