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

【问题标题】：Getting data from a API on the client side without giving the key在客户端从 API 获取数据而不提供密钥
【发布时间】：2019-02-07 18:24:33
【问题描述】：

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

标签： javascript node.js rest express axios

【解决方案1】：

这里有一张图来解释我在 cmets 中所说的话.....

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

地点：

客户端向您（您的服务器）请求数据
您的服务器发送 html 和 css 以显示页面的“框架”（没有数据，只是让他们看到并感觉正在发生的事情......）
您的服务器从 API 服务器请求数据（您说要提供的所有各种“20 岁左右”的东西......）
随着数据的更新（或者您可能已经拥有），您将数据发送到客户端，使用当前数据更新他们的“框架”页面。

【讨论】：

感谢您抽出宝贵时间。出于某种原因，我误读了您最初所说的内容，并认为您在谈论其他内容。
就像他们说的“一张照片值一千个字”——即使是像我这样糟糕的艺术家！ :)

【解决方案2】：

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

如果客户端在您的浏览器中运行，任何东西都可以访问。

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

【讨论】：

您知道任何有此代码示例的文章或指南吗？我不完全明白你在说什么。
@Adeel 说的和我一直在告诉你的一样 - 将数据拉入您的服务器并“提供”给您的客户.....