未设置 CORS 标头 - 我可以请求图像 url，然后将其返回给自己吗？

Posted 2023-03-04

【中文标题】未设置 CORS 标头 - 我可以请求图像 url，然后将其返回给自己吗？

【英文标题】：CORS header not set - can I request an image url and then serve it back to myself?

【发布时间】：2015-09-16 03:19:48

【问题描述】：

我正在尝试使用从图像编译的网格填充 WebGL 地球。这些图像是跨域的，并且托管在无法设置适当标头的服务器上。我可以 XMLHttpRequest 图像 url，然后通过 php 将它们返回给自己以绕过 CORS 错误吗？

或者，更具体地说，我可以使用我自己的网络服务器作为代理，在 WebGL 上下文中将 img url 提供给我自己（以绕过 CORS）吗？

编辑：这里真正的问题是我是否可以使用我自己的网络服务器作为代理来传递 url，或者我是否必须将每个图像实际下载到服务器然后使用它.

【问题讨论】：

如果你的意思是“使用你自己的网络服务器作为另一个网络服务器的代理”，是的，你可以！

@JuniusRendel 是的，这就是我的意思。更具体地说，我可以使用自己的网络服务器作为代理在 WebGL 上下文中为自己提供 img url（以绕过 CORS）吗？

您要做的是使用来自其他来源的图片并将它们放入 WebGL 地球。你有一个例子给我们看吗？你的问题是你收到一条错误消息，上面写着 CORS 错误。那是在浏览器中吗？错误说明了什么？

@hogan 是的，我想使用其他来源的图片。这里真正的问题是我是否可以使用自己的网络服务器作为代理来传递 url，或者我是否必须将每个图像实际下载到服务器然后使用它。这是错误：“访问瓦片时发生错误。跨域访问限制应用于 WebGL 的地图瓦片。在远程域 (enable-cors.org) 上使用 CORS 或将您的应用程序放在与瓦片相同的域中（托管同一域上的应用程序和磁贴或运行磁贴代理）。”正如我所说，在远程域上启用 CORS 不是一种选择。

在另一个问题出现之前我已经写了一个答案：你想在 WebGL Earth 中使用什么组件？是 WE.tileLayerJSON() 吗？

【参考方案1】：

我在使用 API 时遇到过类似的问题。首先，我尝试在 JS 中执行所有操作，可能会收到与您相同的错误消息。

我的解决方案是切换到 PHP 并在服务器端执行，因为现代浏览器会阻止您想要执行的操作。

---

所以是的，这是可能的。

在后端获取图片，然后提供给前端。

---

只需先检索图片，然后将它们作为输出发送到浏览器。您可以通过以下方式同步执行此操作：

$ch = curl_init ... 
...
$pic = curl_exec ... // get the picture

// and then echo it

这个我做过一次，但记不正确。或者您可以异步执行，通常在使用 img-tags 时执行。我不确定它如何与 WebGL 一起使用，但应该类似：

将图片下载到您的文件系统 然后提供浏览器的 URL。

这取决于图像有多大、需要多长时间以及是否要朝这个方向发展。

---

回答第一条评论：

棘手。我没有使用 WebGL Earth 的经验，以及是否可以通过 Ajax（查看 here）或者如果您使用 AngularJS（查看 here）来异步加载数据。你需要试试那个。我会特别关注加载时间。

有一个像 http://example.com/api/get_image/65446 这样的 API 调用，它下载图片，调整大小，然后发送到浏览器。

在这种情况下你会做的是：

向用户发送“正常”页面 然后在此处查找要显示图片的事件 当事件发生时，使用我刚才提到的 API 调用，并使用成功处理程序将其添加到您的页面。同样，如何使用 WebGL Earth 是另一个我无法回答的问题。

如果您想将其用于移动设备，则需要考虑图片大小。由于屏幕相对较小，您应该先将图片缩小。但是，我想这需要多长时间才能得到照片，这是最大的挑战。想要滚动地球的人希望立即看到图片，而不是在 5 秒后（因为我更有可能滚动）

考虑一下是否可以先准备下载并调整大小。如果您只想显示某些图片，例如总共 10.000 张，那么我会这样做。然后，您无需考虑加载时间以及删除哪些图片的时间。您应该针对该主题打开另一个问题，并首先尝试 Ajax 是否可行。

【讨论】：

谢谢，这大概是我想做的。您认为这在需要调用 10-50 张大约 200kb 的图像的情况下有效吗？我没有以这种方式使用临时缓存或 PHP 的经验。它是一个动态生成的网格，因此当用户在全球范围内滚动时，将调用图像。另外，由于您的解决方案需要 PHP，我将如何在页面加载后动态调用它？

@John Doe，你的问题得到解答了吗？

部分。异步 API 调用不是难事——你可以用普通的 js 轻松完成。我在问是否可以动态地（即在页面加载后）发出 XML 请求，然后将返回的 img url 下载到网络服务器，然后将图像传递给浏览器——所有这些都是在页面加载之后。如果在页面加载后无法执行此操作，可能唯一的选择是请求整个地球的图像，这将占用大量带宽。

我不太清楚您所说的“页面加载后”是什么意思。我认为当时的答案是提示收听事件，即用户滚动到特定位置。然后调用你的脚本。检查这在 WebGL 地球中是否可行。