主要图像难题 - 节点.js快速服务器

Major images conundrum - Node.js Express server

本文关键字：js 服务器 节点 图像 难题      更新时间：2023-09-26

所以我们有一个带有 Node 的后端工具.js它为img 标签抓取 HTML 网页。我们使用工人child_process执行此操作，以免阻塞主进程。我们在服务器上这样做的原因是，当我们尝试使用AJAX/和Angular $http访问HTML页面时，我们遇到了CORS问题。

后端网络爬虫完成后，它可以向浏览器发送 url 列表。浏览器可以对与这些 url 相关的图像发出 AJAX 请求，但据我所知，前端会遇到与检索 HTML 相同的 CORS 问题。

所以我们目前有一个相当糟糕的解决方案来解决这个问题。我们使用Cloudinary来完成繁重的工作，而不是我们的Node.js服务器处理base64。后端工作线程child_process抓取 HTML，获取图像 URL，然后向 Cloudinary 发送请求以检索图像并将新的 Cloudinary url 发回我们的服务器。然后我们将Cloudinary url发送到前端，前端可以访问这些Cloudinary url，而不会出现任何CORS问题。

这有两个问题：

  1. 这是相当慢的 - 抓取大约需要 2 秒，然后等待 Cloudinary 保存图像并响应是另一个 2-4 秒。因此，浏览器必须等待大约4-6秒。
  2. 我们最终在Cloudinary中存储了很多图像，这将变得昂贵。我们最终可能会删除大约 90% 保存的图像 在此过程之后立即，因为用户只会 选择浏览器中显示的图像之一，但我们 担心即使图像也可能产生的成本 在云上停留几秒钟。
有

没有人遇到这些问题，并认为他们有比我们使用的解决方案更好的解决方案？

将我的评论变成答案，因为它似乎可能是您的解决方案。

您可以让服务器从页面中抓取图像 URL，然后将 URL 列表发送到客户端。 然后，客户端可以使用这些 URL 将<img>标签动态插入到当前页面中，浏览器将显示图像。

<img>标签网址没有跨源限制。

这样做

，无需尝试从客户端下载带有 Ajax 的映像，因此不会出现 CORS 问题。 您的服务器执行跨源抓取。 然后，客户端只需插入带有抓取 URL 的<img>标签。

这种技术从其他站点"借用"图像，然后使用它们的带宽将它们显示在您的页面中。 您可能应该确保这是允许使用这些图像的用途。

将抓取的图像列表返回到客户端，然后使用 nodejs 服务器作为代理来提供这些图像。

下面是使用 request 模块的快速示例：

http.createServer(function (req, resp) {
  var x = request('http://example.com/image.png')
  req.pipe(x)
  x.pipe(resp)
})

然后，您的客户端将可以访问任何所需的映像：

domain.com/proxy?url=http://example.com/image.png
相关文章：