HTML5 Canvas, XMLHttpRequest blocked by CORS policy

[avtutorials]

Hello,

I'm tearing my hair out, searching for hours... I have a CORS question regarding subdomains of the same domain that I control.  I've got my HTML5 Canvas application in test.MyDomain.com .  It reads manufacturer_list.xml, which is located in images.MyDomain.com.  When I run my application on the web, I get this error:

Access to XMLHttpRequest at 'http://images.MyDomain.com/manufacturer_list.xml?random=70458&' from origin 'http://test.MyDomain.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I've read information on this site, and many forums, etc.  I cannot figure out what needs to be put in my Javascript to allow one subdomain to access files from another subdomain.  I've also tried putting in document.domain="MyDomain.com"; but that had no effect. I don't understand why there is a CORS conflict, when I control all content on the domain.

Should code be put in the Javascript file?  If so, what do I write?  Or, is it a server setting that needs to be changed?  I am totally lost -- any help is greatly appreciated!

[avtutorials]

JC, if you have any suggestions, I'd greatly appreciate it -- as always, thanks for your help.  I'm trying to "pay it forward" by answering others' questions, so thanks for all that you do!

[JoãoCésar]

Amazing!!! Please keep it up!

[JoãoCésar · Accepted solution]

Hi.

Yeah... CORS is a big headache.

Is it possible for you to add the Access-Control-Allow-Origin header like described here?

Or at least are you able to host the XML in the same domain?

Please let us know.

Regards,

JC

[avtutorials]

Hi JC,

What's wierd is that the XML is hosted in the same domain.  The requesting adress is a subdomain, and the serving address is a subdomain of the same domain.  In other words, requester.samedomain.com is trying to read the XML from serving.samedomain.com.  The CORS policy even prevents that... ugh.

Just now, I was able to do a Access-Control-Allow-Origin header, but this has to be done on the server... it cannot be done through Javascript, from what I can tell.  That means I have to monkey with server settings every time I set up a new subdomain.

That link you sent probably says it all: "The same-origin policy is a security concept implemented by browsers to prevent Javascript code from making requests against a different origin/domain than the one from which it was served. So enabling developers to bypass this from Javascript would be a bad thing."

Anyway, thanks again!

[Robert Mc Dowell]

Are you using the same protocol? both must be HTTP or HTTPS

[avtutorials]

Yes, both are http (not https).  Very frustrating... again, they're both subdomains of the same domain.  I don't know why CORS would restrict that.

[Test Screen Name]

Headers have to be done on the server, because if it could be done in the JavaScript, anyone could write a script to overcome CORS.. it is a pain, but the attacks it prevents are real and nasty.

The "same origin" policy (https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) shows that CORS is not applicable only when the host is the SAME. Being from the same DOMAIN is not enough. This covers particularly cases like personalsite.bigisp.com, to avoid attacks from someotherpersonalsite.bigisp.com

[ronb99363116]

Apologies to anybody that is annoyed by reopening an old post but nothing solved my CORS issue until ...

With Export Image Assets set to Texture, I got this warning in output (the HTML DID NOT WORK!):

WARNINGS:

** 244 Bitmaps packed successfully into 2 spritesheet(s).
Frame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls. (56)
Shadow and glow filters are very expensive effects, and not all options are supported. (4)
Content with both Bitmaps and Buttons may generate local security errors in some browsers if run from the local file system.

With Export Image Assets set to Spritesheet I got this warning in output (the HTML DID WORK)

WARNINGS:
Frame numbers in EaselJS start at 0 instead of 1. For example, this affects gotoAndStop and gotoAndPlay calls. (56)
Shadow and glow filters are very expensive effects, and not all options are supported. (4)

Don't ask me why as I really know nothing at all ... but I do have perseverence and observation on my side.

Hope this helps.

Ron

[ronb99363116]

Further note:

I was too hasty. One of my animations worked with this method but another one did not.

Strangely, I did open another version of the one that did not work and it did work.

So apologies but I am back to the drawing board!

Ron

[avtutorials]

I resolved it by going into my webhosting control panel > Apache & nginx Settings.

Under Additional Headers, I entered the following:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET,HEAD,OPTIONS,POST,PUT
Access-Control-Allow-Headers: Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers

I'm not a server guy, so I really don't know what any of that means. But it works!

[ronb99363116]

I agree AV. It is hard to work out these things when one doesn't really know how it all works like some of the awesome contributors here (thank you JC and KGLAD)!

[avtutorials]

Believe me, if I could buy JC and KGLAD an nice steak dinner, I'd do so!  I am forever grateful to them and their amazing help.  They are wonderful guys.

[ronb99363116]

Hello again,

I began asking myself why one version of an interactive had no CORS issue and another did. I mean I wasn't calling for any outside files anyway (that I knew of - as I said I am no expert here). So I asked how my problem occurred.

Upon further investigation into one of my ineractives I found the problem was an image imported from Illustrator. The image had many layers and there was a reference somewhere to a website. Very complicated and I don't realyy fully understand how it works. My method of hunting down the problem was to:

1. hide layers,

2. publish the file with the hidden layers excluded

3. test if the HTML worked.

4. if it did work then the problem lay inside the hidden layer,

5. investigating the layer and chnging some of the objects to just drawings (eg: basically removing the reference to something and pasting the drawing pixels back in the image.

6. test again if the HTML worked

7. if it did then I would continue unhiding layers with this process until all layers were not hidden and the HTML worked.

Hope this helps anyone with a similar issue.

I now test the HTML regulary as I build and if a CORS problem comes up I can quickly find the offending addition (object) and prevent the issue occurring in the first place.

Cheers,

Ron