9

Image from origin 'http://192.168.1.67:5555' has been blocked from loading by Cross-Origin Resource Sharing policy: Invalid response. Origin 'http://127.0.0.1:8000' is therefore not allowed access.

I need to allow cross origin for this MJPEG stream as the user must be able to capture the image with a button and without CORS the canvas is tainted.

I'm struggling with this issue in FF and Chrome (IE uses a different video source as it doesn't support MJPEG).

My server also returns the Access-Control-Allow-Origin: * when serving the page. The image src is being set in Javascript (if that could be related) after setting img.crossOrigin = "Anonymous";. If i remove the crossOrigin="Anonymous", the stream loads but i get the tainted canvas error.

Thanks edit: from wireshark, the MJPEG request:

GET /2d HTTP/1.1 Host: 192.168.1.67:5555 Connection: keep-alive Accept: image/webp,image/*,*/*;q=0.8 Origin: http://127.0.0.1:8000 User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.109 Safari/537.36 Referer: http://127.0.0.1:8000/ Accept-Encoding: gzip, deflate, sdch Accept-Language: en-US,en;q=0.8,it;q=0.6,pt;q=0.4

HTTP/1.0 200 OK Access-Control-Allow-Origin: * Access-Control-Allow-Methods: GET Access-Control-Allow-Headers: Content-Type Content-Type: multipart/x-mixed-replace; boundary=--myboundary

Peterdeka
  • 379
  • 5
  • 16
  • Do you serve `option` requests as well? – artur grzesiak Feb 26 '16 at 18:49
  • In case of CORS browser makes 2 requests: first pre-flight `OPTIONS` and only if all headers set correctly the proper request follows. Take a look [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS) for detailed description. – artur grzesiak Feb 29 '16 at 08:08
  • For what i see, there is no `OPTIONS` request. The browser makes a `GET` request. I updated the question with the headers captured from WIreshark. – Peterdeka Feb 29 '16 at 14:23
  • I struggled with this endlessly too. Is this for production uses? If not, then you could [disable web security](http://stackoverflow.com/questions/3102819/disable-same-origin-policy-in-chrome) and have a play around with the crossOrigin attribute (I can't remember if I completely removed the attribute or left it on). In the end, I couldn't get past this error without hardcoding the image stream source, i.e. ``. – gurpreet- Mar 02 '16 at 20:25
  • I have the same problem, in my case I have `OPTIONS` in `Access-Control-Allow-Method`. Did you manage to solve it? – oscargilfc May 16 '16 at 16:22
  • I have this exact same problem. I'm streaming a webcam from raspberry pi in m-jpeg format with Acess Control Allow Origin as *. This is accessed from another source, and it keeps tainting the canvas even though crossOrigin is anonymous. I have tested with jpg format. JPG format works for the exact same code. But when I change the src from jpg file to m-jpeg, it taints the canvas. I really think this is a Chrome bug. It cannot possibly be my code, because it works when the src is set to a jpg file. – Gyuhyeon Lee Oct 17 '16 at 11:20

1 Answers1

1

run your chrome with this command chrome.exe --disable-web-security should get rid of the cross-origin problems

I have a chrome shortcut and this is the target for it:

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --disable-web-security

Zaid Qureshi
  • 1,199
  • 1
  • 8
  • 15