如何在客户端Javascript中隐藏API密钥

现在我正在编写一个客户端javascript应用程序，它向USPS价格计算器API发出请求。为了发出这个请求，我需要在请求的xml中提供API用户ID。标签如下所示：

。我的问题是：是否有任何方法可以向javascript提供我的用户ID，同时仍然对查看客户端文件的用户隐藏它。现在，我唯一的解决方案是在服务器中创建一个具有用户ID的PHP文件，然后在客户端javascript中使用AJAX请求将其存储在全局变量中。看起来是这样的：

var userID;
$.get("/secrets.php", function( data ) { 
       userID = data;
});

---

这是否足以防止我的应用程序用户看到我的API用户ID？我还能做什么呢？

即使使用PHP解决方案，也不能隐藏用户ID。通过访问

consle.log（userId），可以在浏览器控制台轻松打印。据我所知，客户端可用的任何东西都是易受攻击的，并且很容易被解码。即使您混淆了api密钥，它仍然可以从客户端解码

正确的做法是围绕需要密钥的API调用创建一个PHP包装器，然后从Javascript调用该包装器。
简言之：不，您无法在客户端应用程序中保护API密钥


两种选择


在服务器端进行API调用，然后从服务器端向客户端提供信息
要求客户端使用自己的API密钥
如果您在2020年阅读本页，并且不想出于任何原因（节省托管成本等）开发服务器端代码，那么无服务器功能可能是解决方案

这也会从服务器端调用第三方API，但您不必开发成熟的服务器端API代理

Netlify有这方面的文档。我猜其他供应商，如AWS lambda，谷歌云功能提供类似的东西，但不确定


专业人士
无服务器管理

缺点
供应商锁定
如何执行第二个选项？有人能更详细地描述一下吗？客户端如何将自己的api密钥传递给被调用的服务器端，以便服务器能够验证api密钥？即使如此，客户端仍然需要将api密钥传递给服务器端，对吗？然后仍然需要将api键放在网页源代码中Javascript代码的某个地方，对吗？我在这里有误解吗？没有，只在服务器端使用api密钥这就是它的用途