OpenSeadragon Cross Domain Ajax request

Question

TL;DR: How can I make a Cross-Domain AJAX request with OpenSeadragon?

I'm using OpenSeadragon to display images from a website. I have my Seadragon viewer working with a test URL as follows:

<script src="../../Scripts/openseadragon/openseadragon.js"></script>

<script>
var viewer = OpenSeadragon({
    id: "openseadragon1",
    prefixUrl: "../../Scripts/openseadragon/images/", 
    tileSources: "https://familysearch.org/dz/v1/TH-1971-27860-10353-27/image.xml?ctx=CrxCtxPublicAccess&session" // requires a DZI tile source
});
</script>

<div id="container2" style="float:left;">
    <div id ="openseadragon1" style="width:500px;height:500px;border:1px solid black;float:left;"></div>
</div>

so I know my viewer is working. My problem is that the specific images I need are hosted on a site that does not have a "Access-Control-Allow-Origin" header, so my Ajax request is getting blocked. For example, when I use this URL:

http://66.img.americanancestors.org/e41de95d-6235-4581-b823-4887b50eb8ad.xml

(which I am able to access in my browser, when I type it in it downloads an xml file), I get the "No Access-Control-Origin-Header" error and this error in my viewer:

I know about Cross Domain requests, but being new to OpenSeadragon, I'm not sure how to create a cross-domain request in my OpenSeadragon function. I know that OpenSeadragon has a CreateAJAXRequest() function, but I don't really understand how to implement it, and I'm not sure if that would solve my problem.

Answer 1

Your browser is correctly refusing to load data from a cross-domain source that doesn't set "Access-Control-Allow-Origin". Three possible solutions:

• Make a copy of the xml and host it on your own site
• Make a request to your own site, which acts as a proxy and fetches the remote xml file
• Kindly ask the site owner to set up CORS headers for you

Answer 2

  tileSources: url,
  ajaxWithCredentials : true,