I have a site that uses OpenSeadragon to display deep zoom images. I have it working with some test images, but the images I need are on a domain that I cannot access from my webpage due to a security issue (No "Access-Control-Allow-Origin" header). For the record, the page hosting the DZI images is owned by my company, but because it is an Amazon S3 site, I am unable to add the header to the site because Amazon does not provide that capability.
I've created a Proxy controller, and the controller successfully gets the XML data it needs. Here is my controller code:
public HttpResponseMessage Get(string bucket, string guid)
{
guid = guid.ToLower(); // in case guid is passed as uppercase
string url = "http://" + bucket + ".img.mywebsite.org/" + guid + ".xml";
WebRequest request = WebRequest.Create(url);
request.Credentials = CredentialCache.DefaultCredentials;
WebResponse response = request.GetResponse();
Console.WriteLine(((HttpWebResponse)response).StatusDescription);
Stream dataStream = response.GetResponseStream();
StreamReader reader = new StreamReader(dataStream);
string serverData = reader.ReadToEnd();
Console.WriteLine(serverData);
reader.Close();
response.Close();
// create new XML doc
// load serverData into XML doc
// return XMLdoc
return new HttpResponseMessage()
{
Content = new StringContent(serverData)
};
}
The controller returns the XML data correctly. For example, when I go to http://mysite.mvc/api/test?bucket=66&guid=e41de95d-6235-4581-b823-4887b50eb8ad, I get a page with correct looking XML data. I have also tested this on the DHC chrome extension.
On my webpage, I make an Ajax call to the proxy controller, and use the returned XML to open Seadragon:
var imgdata = {
bucket: "66",
guid: "e41de95d-6235-4581-b823-4887b50eb8ad",
};
var ajaxresult = $.ajax({
url: "/api/test",
type: 'get',
success: function(data) {
//alert("Success");
alert(data);
var viewer = OpenSeadragon({
id: "viewerdiv",
prefixUrl: "../../Scripts/openseadragon/images/",
tileSources: data
});
},
error: function(jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText || textStatus);
},
data: imgdata
});
console.log(ajaxresult);
The alert in my Ajax success function displays the XML I expect. However, in my Seadragon viewer, the tiles do not display (but the viewer is open, and the nav buttons are there). In my console, I have this response:
Tile a.Tile failed to load: 10/01.jpg
for every tile in the image. I suspect this is because my Seadragon viewer is being opened with static XML that is not actually linked to the webpage where it is from, but I have no idea what to do about this. Is there something I can do to fix it, or is my Proxy controller simply not going to work? And if it doesn't work, what else can I do to display these images?
edit: another thought I have is that maybe the tilesources aren't loading because the data is being passed in as a string and not as an XML document?
I also tried this instead of OpenSeadragon()
var viewer = new Seadragon.Viewer("familysearch");
viewer.openDzi(data);
but got a 400 bad request error in my Seadragon viewer.
I also tried slicing off the heading of the XML by using data.substring(38), but same error. My XML looks like this:
<?xml version="1.0" encoding="utf-8"?>
<Image TileSize="256" Overlap="1" Format="jpg" ServerFormat="Default" xmlns="http://schemas.microsoft.com/deepzoom/2009">
<Size Width="550" Height="1765" />
</Image>