javascript - 将 header 数据存储在 url 中

Question

我们正在构建一个购物网站，需要展示数百种产品及其图像。我们没有产品图片，但一家单独公司的服务有。

我获得了此 API 服务的访问权限。在端点 GET 获取产品图像 https://imageservice.com/api/v3/images/{product_UPC} 需要 header Ocp-Apim-Subscription-Key 。

这会返回包含一系列适用的产品图片变体的响应。响应数组中的每个图像都位于类似 https://imageservice.com/api/v3/asset/[hash] 的 URL。这些 HashMap 像 URL 是一次性使用的，必须使用 Ocp-Apim-Subscription-Key 再次请求才能实际显示图像。

这使得向我们自己的产品 API 请求过程变得困难，因为我们无法使用产品及其各自的图像 URL 为我们的数据库播种。相反，每次我们的购物网站从我们自己的数据库请求产品时，我们都必须通过产品 ID 单独请求图像，循环遍历产品并将图像与每个产品进行匹配。

此外，他们的服务被限制为每 10 秒约 20 个请求，并且我们在每个分页调用中加载 30-40 个产品。如果我们最初不将 URL 加载到数据库中，这将减慢产品的显示速度。

问题:我们已经拥有使用此单独图像 API 服务的付费许可证和 API key ，并且我已经在数据库中存储了每个产品及其正确的图像 URL。问题是我们需要将 header Ocp-Apim-Subscription-Key 与 URL 一起传递，而不形成全新的 AJAX 请求。如何做到这一点？

Answer 1

The problem is we need to pass the header Ocp-Apim-Subscription-Key along with the URL without forming an entirely new AJAX request. How can this be done?

如果您的问题是如何在不发出请求的情况下查询图像，那么简短的回答是不，你不能。出于安全原因而创建 header 。如果目标服务需要 header 而不仅仅是 URL 参数，那么您每次想要检索图像时都必须按照它们要求的每个步骤发送一个新请求。

我只看到 2 个解决方案

进一步了解您的 API

您检索图像的公司使用的 API 可能有一些更深层次的选项，以便您更好地控制它。例如，在一个请求中一次检索许多图像的函数。

仔细看看它，它可能是您最好的解决方案。

不使用请求

如果以上建议都不符合您的愿望，那么您别无选择，只能自行存储图像。您处理的是外部 API，该 API 似乎是私有(private)的。因此，您会受到合作伙伴公司工作的限制，这是完全正常和预期的。他们设置这些限制可能是有充分理由的，超越这些限制可能会导致不安全的行为。

如果你想要最大程度的控制，那么你需要自己处理大部分事情。如果您与合作伙伴公司的工作紧密相关，那么您必须与他们一起了解他们可以给予您哪些许可以及如何从他们的工作中最大化利润。

编辑

您还可以使用 AJAx 或替代方案来格式化您的请求，例如 Axios 。仔细看看这个。这至少可以避免您在每次调用时设置所有请求参数。