canvas - How to debug CORS error -
i'm trying grab image amazon s3 using cross-origin resource sharing can use canvas.todataurl() method.
on s3 set corsconfiguration on bucket to:
<?xml version="1.0" encoding="utf-8"?> <corsconfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/"> <corsrule> <allowedorigin>*</allowedorigin> <allowedmethod>get</allowedmethod> <allowedmethod>post</allowedmethod> <allowedmethod>put</allowedmethod> <maxageseconds>3000</maxageseconds> <allowedheader>*</allowedheader> </corsrule> </corsconfiguration>
when canvas.todataurl() threw security error code 18, guessed because image had loaded "crossorigin" attribute set.
still, no matter how load image s3, example:
<img src="http://s3.amazonaws.com/storybookstorage/wood.png" crossorigin="anonymous">
chrome gives me error when load image:
cross-origin image load denied cross-origin resource sharing policy.
can me figure out what's wrong, or how pinpoint problem might be?
my headers image request (from chrome dev tools):
request:
/storybookstorage/wood.png http/1.1 host: s3.amazonaws.com connection: keep-alive cache-control: max-age=0 accept: image/webp,*/*;q=0.8 if-none-match: "d5098b2c3d1417da8ccd9764612248ca" if-modified-since: thu, 08 aug 2013 01:10:23 gmt user-agent: mozilla/5.0 (macintosh; intel mac os x 10_6_8) applewebkit/537.36 (khtml, gecko) chrome/29.0.1547.57 safari/537.36 dnt: 1 referer: http://0.0.0.0:3000/items/1/ accept-encoding: gzip,deflate,sdch accept-language: en-us,en;q=0.8
response:
date:sat, 24 aug 2013 00:27:56 gmt etag:"d5098b2c3d1417da8ccd9764612248ca" last-modified:thu, 08 aug 2013 01:10:23 gmt server:amazons3 x-amz-id-2:gyr2vmt9hec8hrgvcxvdrrrb/som3i/wpuardnpr/py2voajigsda960b0q83zzn x-amz-request-id:434e3571705359e9
thanks!
ok figured out problem. it's hard debug because browser doesn't give info. problem on client side - cors specification picky how request made. in case, think problem loading image in image tag.
the way seemed work if set "crossorigin" attribute before loading image:
var grabbed = new image(); $(grabbed).attr('crossorigin', ''); $(grabbed).attr("src", mysource);
the way able debug test several different setups on client side & different configurations server side because headers can hard interpret. (problems on client side can make seem server isn't configured properly).
Comments
Post a Comment