什么是热链接图像的合法替代方案？

Posted 2023-03-31

【中文标题】什么是热链接图像的合法替代方案？

【英文标题】：What is a legitimate alternative to hot linking images?

【发布时间】：2016-12-21 20:24:10

【问题描述】：

我正在教一群​​学生有关 Web 开发的知识，我们目前正在学习 AngularJS。我为他们创建的一个练习要求他们从免费和开放的pokeapi.co 获取资源。他们可以从 API 返回的数据之一是精灵本身的精灵（小图像）的 URL。

过去，我们只是将链接到该图像的 URL 直接热链接到 <img> 标记中。在刚刚尝试调试 403 Forbidden 错误时，我了解到热链接是一种不好的做法。这对我来说完全有道理，但我现在有 2 个问题：

如果 API 提供此图像的 URL，除了在我的 html 中热链接之外，我应该如何处理此 URL？我是否还希望编写一个可以下载该图像的服务器，创建指向图像路径的链接并改用该 URL？是否有另一种更被接受的方法来避免热链接？ pokeapi的目的不就是提供数据给人们使用吗？为什么它会限制人们使用他们提供的数据的能力？我想这个问题与我的第一个问题密切相关，因为如果有一个我从未听说过的热链接的简单替代方法，那可能会回答我的两个问题。

【参考方案1】：

如果 API 提供此图像的 URL，除了在我的 HTML 中热链接之外，我应该如何处理此 URL？

这在the documentation中有解释：

在您请求资源和图像时在本地缓存它们。

我是否还希望编写一个可以下载该图像的服务器，创建一个指向该图像路径的链接并改用该 URL？

是的

为什么它会限制人们使用他们提供的数据的能力？

因为带宽不是免费的，而且图像会占用大量带宽。

【讨论】：

因此，在仅 AngularJS 的应用程序中，如果图像上出现 403 禁止，我如何在本地缓存图像/资源？

@bobbyz — 你已经说过了：“编写一个可以下载该图像的服务器，创建一个指向图像路径的链接并改用该 URL”

所以“本地缓存”实际上是指服务器上的缓存，最终将是远程的……明白了。我想这意味着本地，因为它是我自己的应用程序而不是其他人的应用程序，所以我很困惑。谢谢！