all of my browsers are not sending the origin header

Question

I am trying to load an image into a canvas element and later pull the data out in toDataURL().

I have my site running with Ruby on Rails 2.3

I have my images

Answer 1

After much brain smashing, I have figured out why my browser isn't sending the origin header.

First a little background. This is for an LMS and is part of a quiz. When the teacher authors the quiz, they add the question text and an image to go into the a drawing canvas for students to explain their answer with a drawing.

As you can guess, that image gets loaded first. It is hidden from the students view, and I grab the src url off that image and try to put it into the canvas element using the javascript.

Well the problem with that is the first time the image is loaded, it is not loaded with the crossorigin attribute. Thus no origin header. And by the time the canvas element is trying to load the image, it is cached without having the origin header in there. And when it tries to get cors going it barfs. Seems to me like maybe this is a bug that all browsers need to fix. But perhaps not.

So in a nut shell, when doing cors, make sure the first load of an image is with a crossorigin attribute to get the origin header included. dur me...

Yup, time for a refactor...

Answer 2

I was getting this CORS error, and in the server end the origin header was not being sent.

The problem for me was that I had set crossOrigin = Anonymous in my image tag. Removing that solved the problem for me, and the CORS error was gone.