javascript - 无需提供 key 即可从客户端的 API 获取数据

Question

目前我正在制作一个页面，显示从 API 收集的数据。大多数数据每 4 小时在服务器端更新一次，但其中一些数据会在客户端请求索引路由时更新。因此，由于数据需要更新，索引文件的发送会出现延迟。我想在请求并发送页面后收集更新的数据，这样就不会出现延迟。我的第一个想法是在客户端发出请求，该请求将在收集数据后处理更新显示，但据我所知，我不知道如何在不给他们 API key 的情况下做到这一点。我应该以这种方式解决问题还是有更好的方法？我使用 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 种左右”的内容......)
4. 当数据更新时(或者您可能已经拥有数据)，您可以将数据发送给客户端，并使用当前数据更新其“框架”页面。