Запрос Fetch PUT изменяет заголовок Cache-Control на Firefox, а не Chrome - PullRequest
Новая
       80

Запрос Fetch PUT изменяет заголовок Cache-Control на Firefox, а не Chrome

0 голосов
/ 27 мая 2020

Для контекста я создаю заранее подписанный URL-адрес для загрузки на S3. Для этих запросов заголовок Cache-Control должен быть установлен в значение public, max-age=31536000, immutable.

Я выполняю выборку с помощью этого кода 

fetch(
        uploadUrl,
        {
            method: 'PUT',
            cache: 'no-store',
            headers: { 'Content-Type': contentType, 'Cache-Control': 'public, max-age=31536000, immutable' },
            body: data
        })
        .then(response => {
            if (response.ok) {
                doneFunc(publicUrl);
            } else {
                failureFunc(response.status);
            }
        })
        .catch(response => {
            failureFunc(response.status);
        });

С Chrome запрос PUT фактически отправляется с заголовком Cache-Control, установленным в вызове fetch public, max-age=31536000, immutable

С Firefox запрос PUT отправляется с заголовком Cache-Control, установленным в public, max-age=31536000, immutable, no-cache. Обратите внимание на добавление no-cache в конце. Это добавление делает мой предварительно подписанный URL недействительным.

Я попытался удалить параметр кеширования, установив для него значения no-cache и no-store. Firefox всегда добавляет что-то в заголовок Cache-Control.

Знаете ли вы, как заставить Firefox вести себя как Chrome и уважать установленные мной заголовки?

1 Ответ

0 голосов
/ 30 мая 2020

Попробуйте использовать объект Headers для добавления заголовков. 

const headers = new Headers();
headers.append('Content-Type', contentType);
headers.append('cache-control', 'public, max-age=31536000, immutable, no-store');

fetch(
        uploadUrl,
        {
            method: 'PUT',
            headers: headers,
            body: data
        })
        .then(response => {
            if (response.ok) {
                doneFunc(publicUrl);
            } else {
                failureFunc(response.status);
            }
        })
        .catch(response => {
            failureFunc(response.status);
        });

Мой пример запроса на выборку (если вы хотите протестировать в firefox консоли) 

const headers = new Headers();
headers.append('Content-Type', 'text/json');
headers.append('cache-control', 'public, max-age=31536000, immutable, no-custom');

const options = {
    method: 'PUT',
    headers: headers,
    body: JSON.stringify({})
};
fetch('https://www.mozilla.org/', options)
.then(response => console.log(response.ok ? 'done' : 'fail'))
.catch(response => console.log('fail catch'));
...