Блог

Главная - Вопросы по программированию - Проблема с проверкой изображения, существующего на удаленном сервере в браузере Chrome, с помощью XMLHttpRequest

Проблема с проверкой изображения, существующего на удаленном сервере в браузере Chrome, с помощью XMLHttpRequest

#javascript #jquery #cors #xmlhttprequest

#javascript #jquery #cors #xmlhttprequest

Вопрос:

Я использую этот метод jQuery на странице, чтобы проверить, существует ли изображение:

 function imageExists(imageUrl) {
  var http = new XMLHttpRequest();
  http.open('HEAD', imageUrl, false);
  http.send();
  return http.status !== 404;
}

Если я загружаю страницу в браузере, она отлично работает, но если я перехожу на следующую страницу, а затем возвращаюсь на эту страницу, скрипт работает некорректно. В консоли браузера ошибка:

Доступ к XMLHttpRequest по адресу ‘https://server/image.jpg ‘from origin’http://client ‘ был заблокирован политикой CORS: заголовок ‘Access-Control-Allow-Origin’ отсутствует на запрошенном ресурсе.

Эта ошибка возникает только при возврате с другой страницы сайта на эту страницу в браузере Chrome. В браузерах Firefox и Edge ошибки нет

Спасибо!!!

Комментарии:

1. Эта ошибка должна быть в любом случае, CORS не зависит от того, перемещаетесь ли вы туда и обратно между вашими собственными страницами, а исключительно от того, разрешает ли удаленный хост такого рода запросы или нет.

2. Я знаю, и CORS включен на сервере с изображениями. Возможно, политика CORS установлена неправильно на удаленном сервере. Но почему это работает без ошибок на странице загрузки?

3. Тогда в ответе должны отображаться соответствующие заголовки на сетевой панели; не так ли?

Ответ №1:

Эта проблема была исправлена путем добавления заголовка запроса ‘Cache-Control’ со значением ‘no-cache’:

 function imageExists(imageUrl) {
    var http = new XMLHttpRequest();

    http.open('HEAD', imageUrl, false);
    http.setRequestHeader('Cache-Control', 'no-cache');
    http.send();

    return http.status !== 404;
}