У меня есть сайт, который использует OpenSeadragon для отображения изображений с глубоким увеличением. У меня он работает с некоторыми тестовыми изображениями, но нужные мне изображения находятся в домене, к которому я не могу получить доступ с моей веб-страницы из-за проблемы безопасности (нет заголовка «Access-Control-Allow-Origin»). К сведению, страница с изображениями DZI принадлежит моей компании, но поскольку это сайт Amazon S3, я не могу добавить заголовок на сайт, поскольку Amazon не предоставляет такую возможность.
Я создал прокси-контроллер, и этот контроллер успешно получает необходимые ему XML-данные. Вот мой код контроллера:
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)
};
}
Контроллер правильно возвращает XML-данные. Например, когда я перехожу на http://mysite.mvc/api/test?bucket=66&guid=e41de95d-6235-4581-b823-4887b50eb8ad я получаю страницу с правильно выглядящими XML-данными. Я также проверил это на расширении Chrome DHC.
На моей веб-странице я делаю вызов Ajax к прокси-контроллеру и использую возвращенный XML для открытия 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);
Предупреждение в моей функции успеха Ajax отображает ожидаемый XML. Однако в моей программе просмотра Seadragon плитки не отображаются (но программа просмотра открыта, а кнопки навигации есть). В моей консоли у меня есть этот ответ:
Tile a.Tile failed to load: 10/01.jpg
для каждой плитки на изображении. Я подозреваю, что это связано с тем, что мое средство просмотра Seadragon открывается со статическим XML, который на самом деле не связан с веб-страницей, откуда он взят, но я понятия не имею, что с этим делать. Можно ли что-то исправить, или мой прокси-контроллер просто не работает? И если это не сработает, что еще я могу сделать, чтобы отобразить эти изображения?
edit: у меня есть еще одна мысль, что, возможно, источники тайлов не загружаются, потому что данные передаются в виде строки, а не в виде XML-документа?
Я также пробовал это вместо OpenSeadragon()
var viewer = new Seadragon.Viewer("familysearch");
viewer.openDzi(data);
но получил ошибку 400 неверных запросов в моем средстве просмотра Seadragon.
Я также попытался отрезать заголовок XML с помощью data.substring(38), но та же ошибка. Мой XML выглядит так:
<?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>