Принудительное управление кэшем: отсутствие кэширования в Chrome через XMLHttpRequest при перезагрузке F5

Я хочу убедиться, что данные, которые я запрашиваю через AJAX-вызов, являются свежими и не кэшируются. Для этого я отправляю заголовок Cache-Control: no-cache

Но моя версия Chrome 33 перекрывает этот заголовок Cache-Control: max-age=0 если пользователь нажимает F5.

Пример. Положить test.html на вашем веб-сервере с содержанием

<script>
    var xhr = new XMLHttpRequest;
    xhr.open('GET', 'test.html');
    xhr.setRequestHeader('Cache-Control', 'no-cache');
    xhr.send();
</script>

В отладчике chrome на вкладке сеть я вижу вызов test.html AJAX. Код состояния 200. Теперь нажмите F5, чтобы перезагрузить страницу. Максимальный возраст: 0 и код состояния 304 Не изменен.

Firefox демонстрирует похожее поведение. Вместо того, чтобы просто перезаписать заголовок запроса, он изменяет его на Cache-Control: no-cache, max-age=0 на F5.

Могу ли я подавить это?

Источник

5 ответов

Решение

Альтернативой может быть добавление уникального номера в URL.

<script>
    var xhr = new XMLHttpRequest;
    xhr.open('GET', 'test.html?_=' + new Date().getTime());
    //xhr.setRequestHeader('Cache-Control', 'no-cache');
    xhr.send();
</script>

временная метка не совсем уникальна, но она должна быть достаточно уникальной для вашего варианта использования.

Источник

Использование строки запроса для управления кэшем в настоящее время не является лучшим вариантом по нескольким причинам, и (только) некоторые из них упоминаются в этом ответе. Он даже объясняет новый стандартный метод контроля версий. Хотя, если вы просто хотите иметь возможность установить заголовки запроса, правильный способ сделать это:

xhr.setRequestHeader('cache-control', 'no-cache, must-revalidate, post-check=0, pre-check=0');
xhr.setRequestHeader('cache-control', 'max-age=0');
xhr.setRequestHeader('expires', '0');
xhr.setRequestHeader('expires', 'Tue, 01 Jan 1980 1:00:00 GMT');
xhr.setRequestHeader('pragma', 'no-cache');

Надеюсь, что это поможет любому в будущем.

Источник

I tried (and failed) some sort of randomization to the URL, but it didn't work because the file I was accessing (.json) was being cached as well.

My solution was to add a timestamp to the call to the json file name (similar approach to ones above, slightly modified). This worked perfectly for me (code snippet below).

      doSomething('files/data.json?nocache=' + (new Date()).getTime(), function(text){...

I'm very new at all of this so I'm sure there are reasons this isn't a standard/correct solution, but it worked for me.

Источник 
http.setRequestHeader("Cache-Control", "no-cache, no-store, must-revalidate");
Источник

Удаление элемента и добавление нового элемента с помощью jQuery (я думаю, также JS) работает для меня в Chrome.

      // Wordpress Context, selectedImage is an object from the Media Selector Dialog
const imageID = selectedImage.id 
const imageURL = selectedImage.url   

// This is a div with the img as an only child
const logoImageContainer = $('#q1nv0-preview-image-container')
let clone = $(logoImageContainer).find('img').clone()
// In the cloned img object I change the src to the new image      
clone.removeAttr("src").attr('src', imageURL)

// Also I have to remove this in wordpress context:
clone.removeAttr("srcset")
// the div is cleared of the old image      
$('#q1nv0-preview-image-container').empty()
// the new image is added to the div
$(logoImageContainer).prepend(clone)
Источник
Другие вопросы по тегам