javascript - 如何在 Image() 构造函数中发送 cookie

Question

我正在将图像注入(inject)到 Canvas 中，我必须通过随我的请求传递 cookie 来安全地获取该图像。我的问题是，当设置 src 时，Image 构造函数似乎没有随请求发送 cookie。 cookies不能通过js访问，它们是由浏览器发送的。

var img = new Image();
img.setAttribute('crossOrigin', 'anonymous');

validateUrl(originalUrl, function (validatedUrl) {
    img.src = validatedUrl; //GET fails after this happens
});

img.onload = function () {
   drawImageProp(context, img);
}

Answer 1

如果您在图像上设置了 crossorigin 属性，则 Cookie 不会随图像请求一起发送。这就是该功能的编写方式。

Cookie 与特定域/子域相关联(并且可以选择与该域内的路径相关联)。请求图像时，请求图像的域的任何 cookie 将自动与图像请求一起发送。

浏览器仅允许 Javascript 访问与主机网页同源的 cookie。因此，Javascript 无法读取其他域的 cookie。

因此，当您通过设置 .src 属性请求图像时，属于图像 URL 域的任何 cookie 将自动随图像请求一起发送(您无需执行任何操作)导致这种情况)。