Fetch PUT 请求在 Firefox 上得到 Cache-Control header 修改，而不是 Chrome

Question

对于上下文，我正在创建预签名 URL 以上传到 S3。对于这些请求，Cache-Control header 必须设置为值 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 header 在获取调用 public, max-age=31536000, immutable

中设置发送的

对于 Firefox，发送 PUT 请求时 Cache-Control header 设置为 public, max-age=31536000, immutable, no-cache。注意最后添加 no-cache 。此添加使我的预签名 URL 无效。

我尝试删除缓存参数，将其设置为 no-cache 和 no-store。 Firefox 总是在 Cache-Control header.

中添加一些东西

你知道让 Firefox 表现得像 Chrome 并尊重我设置的 header 的方法吗？

Answer 1

尝试使用 Headers object 添加 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'));

Fetch PUT 请求在 Firefox 上得到 Cache-Control header 修改，而不是 Chrome

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

javascript

caching

cache-control

fetch-api