0

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:

seadragon error

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.

Erica Stockwell-Alpert
  • 4,624
  • 10
  • 63
  • 130

2 Answers2

0

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
sethobrien
  • 969
  • 7
  • 13
  • I made a proxy, and it's successfully returning the XML I need, but my Seadragon viewer is failing to load the tiles when I pass in the XML. I tried both OpenSeadragon() and Seadragon.Viewer.openDzi() but neither works; OpenSeadragon opens the viewer but fails to load the tiles, and Seadragon.Viewer.openDzi loads a 400 error. – Erica Stockwell-Alpert Aug 14 '14 at 14:55
  • I've added some info on this here: https://github.com/openseadragon/openseadragon/issues/460#issuecomment-52215146 – iangilman Aug 14 '14 at 17:33
0
  tileSources: url,
  ajaxWithCredentials : true,
htmllancer
  • 1