tracking.js
tracking.js copied to clipboard
CORS issue
I am trying to use tracking.js, but having CORS issues. I am saving images to a dropbox folder using the API, then pulling those images, loading them and trying to analyze. However, since the images are on a remote server, I get an CORS issue when tracking.js tries to get imageData (getImageData). Is there a work around this?
This pull was supposed to fix this issue #93. Could you try to set img.crossOrigin = "*";
on your image?
@eduardolundgren with the fix you described, I get some wired problem in IE11. According MDN IE11 supports crossOrigin setting on images. But somehow the interpretation of this setting is wrong. When I set the src property on an image with crossOrigin="*" the source will not be fetched. I get no error, simply the request for the image is not made. Maybe it would make sense to make the crossOrigin setting configurable on the tracker?
Also tracker is not working for images with data uri in Safari . It is impossible to set CrossOrigin for them http://stackoverflow.com/a/31667722/683845
The workaround is to set crossOrigin = null
for data uri. It works in Safari.
Im trying to set crossOrigin = "*"
in the Tracking.js implementation:
$img = $('#trackme')
$img.crossOrigin = "*"
We also tried $img.crossOrigin = null
but it still shows the same issue with CORS policy
Ok I finally could get it working, my images are stored on an S3 bucket, I just changed the CORS config of my bucket to the following:
(My app is a rails 5 app and it is deployed on heroku)
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration>
<CORSRule>
<AllowedOrigin>https://sortyu-staging.herokuapp.com</AllowedOrigin>
<AllowedOrigin>http://sortyu-staging.herokuapp.com</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>
My app displays the images through ajax, I was just appending the image, to the html however thanks to this thread I understood that I needed to load the images using JavaScript that way I could pass the headers in this case crossOrigin="anonymous"
Im not sure how to make a fix for Trackingjs out of the box.
it did not work for me
Access to image at 'http://192.168.1.245:8081/current' from origin 'http://192.168.1.245:5000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. tracking-min.js:8 GET http://192.168.1.245:8081/current net::ERR_FAILED