Пока вопрос очень старый, проблема остается, и в Интернете мало что нужно для ее решения. Я придумал решение, которое хочу поделиться:
Вы можете использовать изображение (или видео) без установленного атрибута crossorigin
и проверить, можете ли вы получить запрос HEAD на один и тот же ресурс через AJAX. Если это не удается, вы не можете использовать ресурс. если это удается, вы можете добавить атрибут и повторно установить источник изображения / видео с прикрепленной меткой времени, которая перезагружает его.
Это обходное решение позволяет вам показывать свой ресурс пользователю и просто скрывать некоторые функции если CORS не поддерживается.
HTML:
<img id="testImage" src="path/to/image.png?_t=1234">
JavaScript:
var target = $("#testImage")[0];
currentSrcUrl = target.src.split("_t=").join("_t=1"); // add a leading 1 to the ts
$.ajax({
url: currentSrcUrl,
type:'HEAD',
withCredentials: true
})
.done(function() {
// things worked out, we can add the CORS attribute and reset the source
target.crossOrigin = "anonymous";
target.src = currentSrcUrl;
console.warn("Download enabled - CORS Headers present or not required");
/* show make-image-out-of-canvas-functions here */
})
.fail(function() {
console.warn("Download disabled - CORS Headers missing");
/* ... or hide make-image-out-of-canvas-functions here */
});
Протестировано и работает в IE10 + 11 и текущем Chrome 31, FF25 , Safari 6 (рабочий стол). В IE10 и FF вы можете столкнуться с проблемой, если и только если вы пытаетесь получить доступ к http-файлам из https-скрипта. Я еще не знаю об обходном пути для этого.
UPDATE Jan 2014:
Необходимые заголовки CORS для этого должны быть следующими (синтаксис конфигурации Apache):
Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "referer, range, accept-encoding, x-requested-with"
х-заголовок требуется только для запроса ajax. Насколько мне известно
он не используется всеми, но большинством браузеров,