When making a PUT request with Fetch, the Cache-Control header is altered in Firefox but remains unchanged in

Question

When making a PUT request with Fetch, the Cache-Control header is altered in Firefox but remains unchanged in

In the process of generating presigned URLs for uploading to S3, it is necessary to set the Cache-Control header value to be

public, max-age=31536000, immutable

.

The fetch operation is executed using the following 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);
        });

When making a PUT request in Chrome, the Cache-Control header included in the fetch call is accurately preserved as

public, max-age=31536000, immutable

.

In contrast, when the PUT request is made in Firefox, the Cache-Control header includes an extra parameter, specifically

public, max-age=31536000, immutable, no-cache

. This unexpected addition causes issues with the validity of the presigned URL.

Attempts to remove or modify the cache parameter including setting it to no-cache or no-store have not been successful in preventing Firefox from appending additional parameters to the Cache-Control header.

Is there a solution to ensure that Firefox behaves consistently with Chrome and respects the originally set headers?

javascript caching fetch-api cache-control

Answer 1

Answer №1

After searching through numerous comments, Colin Nicholson's solution finally provided the answer I needed. Here it is reposted for easier visibility:

In Safari or Firefox, keeping the network tab open can disrupt the presigned S3 URL PUT request by adding an unnecessary no-cache header. Simply closing the developer console should resolve the uploading issue.

Answer 2

After searching through numerous comments, Colin Nicholson's solution finally provided the answer I needed. Here it is reposted for easier visibility:

In Safari or Firefox, keeping the network tab open can disrupt the presigned S3 URL PUT request by adding an unnecessary no-cache header. Simply closing the developer console should resolve the uploading issue.

Answer 3

Answer №2

Consider utilizing the Headers object for adding 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);
        });

You can test the sample fetch request below 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'));

Answer 4

Consider utilizing the Headers object for adding 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);
        });

You can test the sample fetch request below 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'));

When making a PUT request with Fetch, the Cache-Control header is altered in Firefox but remains unchanged in

Answer №1

Answer №2

Similar questions

Refreshing Child's Activities

Issues arising from the implementation of AJAX forms

Utilizing localstorage data in angular 2: A comprehensive guide

Problem with Handlebars: When compiling, TypeError occurs because inverse is not recognized as a function

Creating an event on the containing element

Implementing custom CSS styles for HighCharts API pie chart drilldown labels

Alternate routing based on conditions in Angular

Generate an image, PDF, or screenshot of a webpage with the click of a button

The page does not seem to be reloading properly due to a redirect issue

Issues with managing multiple user sessions in express-session

Using websockets in a React client application

What is the ideal event to trigger a response when the user completes entering text into the search field in Vue.js?

Error: The integer provided in the Stripe payment form is invalid in the

Tips for avoiding Netlify's error treatment of warnings due to process.env.CI being set to true

An interesting result from using fs.appendFile: the mysterious [object Object]

Code snippet for fetching JavaScript file using Angular's caching mechanism

What methods do you suggest for storing the app's state in the browser to reduce the number of requests to the backend?

How can you substitute sections of a sentence with an array of strings?

Can you explain the TypeScript type for the queryKey in React Query?

Guide for redirecting puppeteers' attention to a new pop-up interface