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

Popular posts from this blog

java - Run a .jar on Heroku -

java - Jtable duplicate Rows -

validation - How to pass paramaters like unix into windows batch file -