eduardolundgren / tracking.js

A modern approach for Computer Vision on the web
http://trackingjs.com
Other
9.44k stars 1.45k forks source link

CORS issue #123

Open nfarve opened 9 years ago

nfarve commented 9 years ago

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?

eduardolundgren commented 9 years ago

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

johann-sonntagbauer commented 8 years ago

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

anfinil commented 7 years ago

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

kidig commented 7 years ago

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

ssoulless commented 7 years ago

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 commented 7 years ago

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.

kenken64 commented 4 years ago

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