隐藏来自浏览器开发者工具网络的 Angular API 调用

Posted 2023-03-07

【中文标题】隐藏来自浏览器开发者工具网络的 Angular API 调用

【英文标题】：Hiding Angular API calls from developers tool network of browser

【发布时间】：2019-07-22 10:31:31

【问题描述】：

当我从 Angular 向后端调用一个 API 调用时，我可以在“开发者工具”的“网络”部分看到该 API 调用（ctrl+shift+i）。我想从“网络”列表中隐藏 API 调用。正如我在一些网站上看到的那样，他们隐藏了 API 调用。意味着，数据即将到来，但它没有在开发人员的工具中列出。我该怎么办？

例如，点击这个网站的 url https://track.aftership.com/shreetirupati/115601676472 或 http://www.shreetirupaticourier.net/Frm_DocTrack.aspx?docno=115601676472，并没有点击任何 API，这是否意味着他们直接从前端的 DB 访问数据？

【问题讨论】：

这听起来像XY problem。你的最终目标是什么？你为什么要这样做？

好吧，我只是想知道开发人员是如何实现它的。所以，如果将来我想隐藏我可以使用的 API。那么，它怎么会遇到 xy 问题？

Angular 5: Is there way hide API call? or make it private?的可能重复

浏览器属于用户——不是你的网站

我的建议是您在角度和后端加密和解密，这样数据将被加密并且更难翻译。但这需要访问应用程序和 api 服务代码。

【参考方案1】：

您无法从 Chrome DevTools 中隐藏服务调用。如果您想提供安全调用，您只能对用户进行身份验证。

推荐您阅读：***.com/a/53630102/5955138

【讨论】：

好的。但是，我看到的数据正在显示的网站呢？但是，没有在显示数据的任何 API 调用响应中显示？

@PSatishPatro 那些网站是服务器端渲染的。

【参考方案2】：

我同意上述@shadowman_93 的回答。

无法从浏览器中隐藏网络 API 调用。 如果你想以某种方式实现这一点，那么可以像许多流行网站（亚马逊、Airbnb 等）一样使用服务器端渲染。 此外，如果您使用过 Service Worker，那么您的应用程序的少数部分可能在第一次加载后仍会显示 API 调用（通常发生在 SPA 中）。

如果您使用服务器端渲染，您还可以提高您的 SEO，因为它可以帮助 Google 抓取工具在您的网站首次加载时获取重要内容。

【参考方案3】：

您无法隐藏网络选项卡中的 api 调用，但您可以使用 signalR /websocket 来减少可见的 API 调用。

您需要在服务器端创建“Get”“Post”等方法并从客户端调用它们并传递数据。

我建议仅将这种解决方法用于数据传输较少的 API。