Fetch PUT请求在Firefox上被修改了Cache-Control头，而在Chrome上没有。

Question

对于上下文，我正在创建预签名的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 在获取调用中设置的头 public, max-age=31536000, immutable

在Firefox中，发送PUT请求时，会使用 Cache-Control 头部设置为 public, max-age=31536000, immutable, no-cache. 请注意，增加了 no-cache 在最后。这样一来，我的预签名URL就无效了。

我试着删除缓存参数，将其设置为 no-cache 和 no-store. 火狐浏览器总是会给它添加一些东西。Cache-Control 标题。

你知道有什么方法可以让Firefox表现得像Chrome一样，并尊重我设置的头文件吗？

Answer 1

尝试使用 标题 对象来添加头信息。

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