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

Question

在 firefox 和 safari 中，自定义 headers 不会在服务工作者内部发送获取请求。但是 chrome 有效。（我在 Access-Control-Allow-Headers 中添加了自定义 header）

Service Worker 中的代码：

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

我的OPTIONS returns 204，请求模式是'cors'。也是同源请求。

Answer 1

（对于 same-origin 个请求，CORS 不起作用。）

我无法重现您描述的问题； here's a live deployment of a site with a service worker that makes a request to the https://httpbin.org/#/Request_inspection/get_headers 启动时的端点，并记录回响应，表明收到了哪些请求 header：

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

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

您可以尝试一下，通过重新混合 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);

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

Firefox & Safari doesn't send custom http headers in Service Worker requests

javascript

safari

firefox

fetch

service-worker