Service Worker未发送请求头

Question

我正在尝试从Service Worker中获取一个Web服务。该服务是一个JSP，受基本的Apache认证保护，因此我必须在请求头中提供凭据进行身份验证。下面的请求从主窗口中完美地工作：

self.addEventListener('push', function(event) {
  console.log('Received a push message', event);

  event.waitUntil(
    fetch(ONLINE_SITE_ENDPOINT, {
    method: 'GET',
    mode: 'cors',
    headers: {
        'Accept': 'application/json',
        'Authorization': 'Basic btoa(auth info)'
    }
    }).then(function(response) {
        //process response
    }).catch(function(err) {

    })
  );
});

这段代码位于一个event.waitUntil()作用域中，是从一个“push”事件监听器调用的函数。然而，完全相同的调用会失败并显示401（未经授权）。开发者工具的网络面板显示头信息并未被发送：

OPTIONS /latest-new.jsp HTTP/1.1
Host: {an accessible host}
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost
User-Agent: Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36
Access-Control-Request-Headers: accept, authorization
Accept: */*
Referer: http://localhost/service-worker.js
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

这里有什么东西缺失了吗？或者说从服务工作者中不能实现它？

一些额外的信息：由于在服务工作者范围内“未定义”，因此无法使用XMLHttpRequest。在检索JSON之前，JSP上的标头：

response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");

更新: 明显服务工作者的认证头部存在问题，因为对非安全URL的请求不会失败。没有Apache授权的相同服务可以正常工作。

- nnimis

---

我不明白你的评论中关于XMLHttpRequest的意思，因为它在webWorkers中是完全支持的（请参见MDN上有关使用webWorkers的描述）。你能否发布所有相关的webWorker代码？我们需要看到哪里出了问题，而你在这里没有发布足够的代码。 - jfriend00

@jfriend00 刚刚更新了代码，以便向您展示监听器。处理代码是无关紧要的（它只显示一个通知，其中包含从 JSON 中检索到的信息）。我不知道为什么，如果我尝试在 Web Worker 中执行 var xmlhttp = new XMLHttpRequest();，我会得到一个“未定义”的错误。在 Web Worker 外部，它可以正常工作。Google Chrome 43.0.2357.134，Ubuntu。 - nnimis

抱歉，但我不知道event.waitUntil()或fetch()在做什么，因为它们不是标准函数（它们必须来自某个库）。我希望看到实际设置您所说的缺失标头的代码，并能够跟踪足够的流程以查看请求是如何被形成和发送的。您只发布了高级别代码，没有显示问题可能发生的任何细节。 - jfriend00

@jfriend00，这些函数不是来自一个库，请查看这个链接：https://developers.google.com/web/updates/2015/03/introduction-to-fetch 我根据那个示例编写了我的代码：https://github.com/gauntface/simple-push-demo/blob/master/app/service-worker.js - nnimis

请求中缺少哪些确切的标头？ - jfriend00

@jfriend00 我正在fetch()上设置的是 Authorization 和 Accept。 - nnimis

Answer 1

您应该将接受和授权设置为允许的标头。

response.setHeader(
  "Access-Control-Allow-Headers", 
  "x-requested-with, accept, authorization"
);

对于"OPTIONS"请求，响应的正文应该为空（实际上并不必要，因为在这种响应中没有正文用例），Content-length:应该为0（零）

请注意，不需要将此请求传递给应用程序（可以这样做，但不需要）

- zb'

---

谢谢@eicto，我试过了，但不幸的是头部仍未被发送。由于缺少身份验证头部，请求本身在Apache上被拒绝，因此无法获得响应。 - nnimis

你不应该在OPTIONS请求中需要认证。 - zb'

实际上会有两个请求，第一个是OPTIONS，第二个是GET。 - zb'

那么第一个请求总是没有我想发送的头信息吗？我在网络分析器（Chrome开发工具）中没有看到它。 - nnimis

是的，使用 Fiddler 或 Wireshark 来查看。 - zb'

好的，但是来自主窗口的相同fetch()调用按预期工作，并且标头都在那里，似乎服务工作者的请求不同。 - nnimis

Answer 2

在fetch()调用的参数中传递{"credentials": "include"}。

https://fetch.spec.whatwg.org/

- tanenbring