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?
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'));
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.