在 react/redux 应用程序（代理）中隐藏 api url

Posted 2023-02-22

【中文标题】在 react/redux 应用程序（代理）中隐藏 api url

【英文标题】：Hiding api url in react/redux application (proxy)

【发布时间】：2016-10-24 10:36:04

【问题描述】：

我担心我的 react/redux 应用程序的安全性，因为我的 api url 在捆绑的 app.js 文件中向公众公开。我一直在研究这个，一些开发人员以某种方式代理它，即我可以使用api/，而不是使用我的api url，每当我使用axios 或superagent 之类的库执行调用并且它被代理到我的api url，但是这个用户只能在他们身边看到api/。

我正在尝试解决这个问题，我假设这是在 express config 中设置的？

【问题讨论】：

我不明白如何隐藏客户端网络流量，除非服务器正在拨打电话，否则可以在浏览器或提琴手会话中检测到任何客户端调用，对吧？

通常的解决方案是在服务器端进行或使用某种身份验证。

【参考方案1】：

你有一个合理的担忧。

通常，您会让您的客户端代码调用 /api，然后在 express（或您使用的任何服务器）中为“/api”创建一个路由，该路由将该请求代理到实际的 api url。

这样您就可以隐藏来自客户端的任何敏感信息。例如身份验证令牌、api 密钥等。

在快递中你可以这样做：

app.use('/api', (req, res) => 
  const method = req.method.toLowerCase();
  const headers = req.headers;
  const url = 'your_actual_api_url';

  // Proxy request
  const proxyRequest = req.pipe(
    request(
      url
      headers,
      method,
    )
  );

  const data = [];
  proxyRequest.on('data', (chunk) => 
    data.push(chunk);
  );

  proxyRequest.on('end', () => 
    const  response  = proxyRequest;
    const buf = Buffer.concat(data).toString();
    res.status(response.statusCode).send(buf);
  );
);

这个例子有点复杂，但它可能对你有用。

【讨论】：

任何人仍然可以破解打开这个文件并得到your_actual_api_url。最重要的是，网络流量将始终对客户端可见。

不正确。此代码将在服务器上执行。所以这段代码在客户端上是不可见的。

啊，我现在知道这是在快递里面。我想我现在对 OPs 问题感到困惑，因为我同意服务器执行的任何远程调用显然都不能通过客户端访问。

OP 的担忧是在使用 Node 和 Webpack 或 Browserify 之类的捆绑器构建客户端应用程序时出现的问题：一切都在客户端代码中结束。包括执行 API 调用的代码。据我了解，OP 希望从该（客户端）代码中隐藏实际的 API url，并且使用代理是一种方法。

嗯，我使用 webpack，但它只从我的入口点吸收代码，而不是 server.js。哦，好吧，谢谢你的澄清。