处理来自前端的 API 调用的最佳方式

Question

好的，所以 atm 我有一个使用 Nuxt JS 构建的前端应用程序，使用 Axios 向我的 REST API（单独）发出请求。

如果用户在网站上进行搜索，则 API URL 在 XMLHttprequests 中可见，因此每个人都可以根据需要使用 API。

最好的方法是什么，以便只有通过我的网站搜索的用户才能访问 API，而直接访问 URL 的人会被拒绝。我想使用某种令牌系统，但最好的方法是什么？智威汤逊？（用户从不登录所以没有"authentication"）

谢谢！

Answer 1

IMO，你不能阻止其他非法客户端访问你的您描述的后端，官方客户端和其他非法客户端对您的后端有相同的知识。
但是您可以通过一些方法让非法客户端更难访问您的后端，例如 POST 所有请求 , 特殊键在header, 30-minutes-changed令牌在header 和 server-side API 受客户端 IP 限制。
如果搜索 API 的安全性真的很重要，请通过登录进行身份验证；如果没有，那就放手吧，因为它不在您的关键路径中。让我们专注于其他重要的事情。

Answer 2

我在同一个 "boat" 中，我当前的设置实际上是在 VueJs 中，但在使用 Whosebug 之前，我开发了一种方法，实际上，前端调用服务器，然后服务器调用 API，所以在浏览器中，你只会看到对服务器层的调用，唯一的限制是调用必须来自相同的主机名。

后端使用 expressJs 处理，前端使用 VueJs

// protect /api calls to only be originated from 'process.env.API_ALLOW_HOST'
app.use(api.allowOnlySameDomainRequests());

...

const allowHostname = process.env.API_ALLOW_HOST ||'localhost';

exports.api = {
    ...
    allowOnlySameDomainRequests: (req, res, next) => {
        if(req.url.startsWith('/api') && req.hostname === allowHostname) {
            // an /api call, only if request is the same
            return next();
        } else if (!req.url.startsWith('/api')) {
            // not an /api call
            return next();
        }

        return res.redirect('/error?code=401');
    },
    ...
};

在我们的例子中，我们使用 Oauth2（Google 通过 passportJs 登录）来登录用户，我总是有一个由 OAuth2 成功重定向提供的用户 ID，并将该用户 ID 传递给API 在 header 中连同 apikey... 在服务器中我检查该用户 ID 权限并允许或不允许执行该操作。

但即使我也在试图找到更好的东西。我见过几个 javascript 前端应用程序调用他们的后端，但他们使用 Bearer 令牌。

作为一个好奇的用户，您会看到所有 API 的路径以及它们的组成方式，但在我的例子中，您只看到对 expressJs 后端的调用，并且只有在那里我转发到真实 API...我不知道这是否只是 "more work"，但似乎更 "secure" 以这种方式解决问题。

处理来自前端的 API 调用的最佳方式

Best way to handle API calls from frontend

node.js

express

vue.js

axios

nuxt.js