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

【问题标题】：Firefox & Safari doesn't send custom http headers in Service Worker requestsFirefox 和 Safari 不在 Service Worker 请求中发送自定义 http 标头
【发布时间】：2021-11-17 18:08:45
【问题描述】：

在 Firefox 和 safari 中，自定义标头不会在服务工作线程内发送获取请求。但是铬有效。（我在Access-Control-Allow-Headers 中添加了我的自定义标题）

Service Worker 中的代码：

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

我的 OPTIONS 返回 204，请求模式为“cors”。也是同源请求。

【问题讨论】：

这能回答你的问题吗？ fetch() does not send headers?
否，我的选项返回 204，请求模式为“cors”。也是同源请求。

标签： javascript firefox safari fetch service-worker

【解决方案1】：

（对于同源请求，CORS 不起作用。）

我无法重现您描述的问题； here's a live deployment 的站点的服务工作者在启动时向 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 来玩弄这个并测试不同的场景

【讨论】：

您好杰夫，感谢您的回复。我发现了我的错误。它不发送标头，因为我传递的是 Request 对象而不是 URL。很抱歉缺少信息。

【解决方案2】：

我发现了我的错误。我传递的是 Request 对象而不是 URL。所以我应该像下面这样：

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

【讨论】：