tracking.js icon indicating copy to clipboard operation
tracking.js copied to clipboard

CORS issue

Open nfarve opened this issue 9 years ago • 7 comments

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?

nfarve avatar Jun 23 '15 15:06 nfarve

This pull was supposed to fix this issue #93. Could you try to set img.crossOrigin = "*"; on your image?

eduardolundgren avatar Jun 24 '15 02:06 eduardolundgren

@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?

johann-sonntagbauer avatar Mar 29 '16 06:03 johann-sonntagbauer

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

anfinil avatar Sep 19 '16 22:09 anfinil

The workaround is to set crossOrigin = null for data uri. It works in Safari.

kidig avatar Jan 18 '17 09:01 kidig

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

ssoulless avatar Feb 07 '17 21:02 ssoulless

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.

ssoulless avatar Feb 08 '17 01:02 ssoulless

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

kenken64 avatar Mar 17 '20 22:03 kenken64