Firefox 和 Safari 不会在 Service Worker 请求中发送自定义 http 标头

Question

在firefox和safari中，自定义报头不会在service worker中发送fetch请求。但是chrome是有效的。(我在Access-Control-Allow-Headers中添加了自定义标题)

service worker内部代码:

fetch(Request, {
headers: {
'my-custom-header': 'a value'
}
});

My OPTIONS返回204，请求模式是'cors'。也是同源请求

Answer 1

(对于同源请求，CORS不起作用)

我无法重现你描述的问题;下面是一个带有service worker的站点的实时部署，它在启动时向https://httpbin.org/#/Request_inspection/get_headers端点发出请求，并记录响应，指示收到了哪些请求头:

fetch('https://httpbin.org/headers', {
headers: {'my-custom-header': 'a value'},
})
.then((response) => response.json())
.then((data) => console.log(data.headers));

在Chrome、Firefox和Safari中，我看到自定义报头与浏览器默认发送的其他报头一起返回。

您可以通过重新混合https://glitch.com/edit/#!/valuable-nonchalant-pet?path=sw.js%3A3%3A81

来测试不同的场景。

Answer 2

我意识到我的错误了。我传递的是请求对象而不是URL。所以我应该这样做:

const request = new Request(event.request); 
request.headers.append('my-custom-header', 'a value'); 
return fetch(request);