Skip to main content
avtutorials
avtutorials
Known Participant
April 22, 2020
Answered

HTML5 Canvas, XMLHttpRequest blocked by CORS policy

  • April 22, 2020
  • 3 replies
  • 4990 views

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!

      Correct answer JoãoCésar17023019

      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

      3 replies

      R
      ronb99363116
      Participating Frequently
      April 28, 2022

      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

      R
      ronb99363116
      Participating Frequently
      April 28, 2022

      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
      avtutorialsAuthor
      Known Participant
      April 30, 2022

      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!

      JoãoCésar17023019
      Community Expert
      JoãoCésar17023019Community ExpertCorrect answer
      Community Expert
      April 23, 2020

      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
      avtutorialsAuthor
      Known Participant
      April 23, 2020

      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
      Robert Mc Dowell
      Legend
      April 23, 2020

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

      avtutorials
      avtutorialsAuthor
      Known Participant
      April 22, 2020

      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ésar17023019
        Community Expert
        JoãoCésar17023019Community Expert
        Community Expert
        April 23, 2020

        Amazing!!! Please keep it up!

        Terms & ConditionsAccessibility statement
        Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices