Fetch PUT request gets Cache-Control header modified on Firefox and not Chrome

Question

For the context, I'm creating presigned URL to upload to S3. For these requests the Cache-Control header has to be set to the value public, max-age=31536000, immutable.

I do the fetch with this code

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);
        });

With Chrome the PUT request is actually sent with the Cache-Control header set in the fetch call public, max-age=31536000, immutable

With Firefox the PUT request is sent with the Cache-Control header set to public, max-age=31536000, immutable, no-cache. Notice the addition of no-cache at the end. This addition makes my presigned URL not valid.

I tried by removing the cache parameter, by setting it to no-cache and to no-store. Firefox always adds something to the Cache-Control header.

Do you know a way to make Firefox behaves like Chrome and respect the headers I set?

If I remove `cache: 'no-store'` from fetch options, Firefox does NOT add `Pragma: no-cache` and does NOT add `no-cache` to the end of the `Cache-Control` header. — Marian, May 29 '20 at 17:35

Aamir Shah · Accepted Answer · 2020-05-29T21:20:54.527

Try using the Headers object to add 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);
        });

My sample fetch request (if you want to test in firefox console)

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'));

I tried again setting headers this way and removing the cache parameter and it worked. — gsempe, May 31 '20 at 13:46
I arrived here with this problem - using fetch to PUT to S3 - and Firefox kept adding no-cache no matter what I did (including this answer). Solution? Close the DevTools window.... — Colin Nicholson, Aug 12 '21 at 17:06

score 1 · Answer 2 · answered Jun 10 '22 at 15:19

Colin Nicholson had the right answer for me, but it was buried in a comment, so I'm reposting it at the top level:

When the network tab is open in Safari or Firefox, they add an extra no-cache header which causes the presigned S3 URL PUT request to fail. Close the dev console and the upload should work.

Fetch PUT request gets Cache-Control header modified on Firefox and not Chrome

2 Answers2

Linked