Question

我有两个域，一个包含图像，另一个正在尝试访问此图片。以下适用于加载图像：

image = new Image(); 
image.src = "someotherdomain.com/picture.png";

但是，我还想发回一些信息。由于Same-Origin-Policy，我无法使用AJAX。这就是我想要做的事情：

image = new Image(); 
image.src = "someotherdomain.com/picture.png";

console.log(image.message); // How can I receive the message from the other server to here?

我无法启用CORS或其中任何一种。

Answer 1

如果要向服务器发送GET请求，只需设置文件路径

即可

image.src = "http://example.com/some.php?message=" + encodeUriComponent("your string here");

现在服务器可以返回一个像素的gif，它可以工作。

但现代浏览器支持使用CORS进行Ajax调用，因此如果服务器设置了正确的标头以允许您的域，则可以使用XMLHttpRequest对象。

如果您想要发回数据，则需要制作JSONP request。

function myCallback(obj) {
    console.log(obj);
}

var scr = document.createElement("script");
scr.src = "http://example.com/some.php?callback=myCallback&message=" + encodeUriComponent("your string here");
document.body.appendChild(scr);

，服务器返回一个看起来像

的脚本

myCallback({"hello" : "world"});

Answer 2

如果您在服务器端生成图像或者您可以修改它，则可以将消息添加到图像exif数据，而不是在客户端使用JS解析和读取它这个：https://github.com/jseidelin/exif-js。（当然，这可能不是最聪明，最简单的发送消息的方式）。

Answer 3

但是，我还想发回一些信息。由于Same-Origin-Policy，我无法使用AJAX。

由于完全相同的Same-Origin-Policy禁止通过Ajax读取，因此不允许从包含跨域的图像中读取任何数据。您只能通过为图像文件启用CORS来读取图像数据。

另见Ways to circumvent the same-origin policy。

使用Javascript通过图像发送消息

3 个答案: