未从 Service Worker 发送的请求标头答案

【问题标题】：Request headers not sent from Service Worker未从 Service Worker 发送的请求标头
【发布时间】：2016-12-26 20:22:18
【问题描述】：

我正在尝试从 Service Worker 获取 Web 服务。该服务是一个使用基本 Apache 身份验证保护的 JSP，因此我必须提供凭据以在请求标头中进行身份验证。以下请求在主窗口中运行良好：

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() 范围内，位于从“推送”事件侦听器调用的函数中。但是，相同的调用失败并返回 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

这里有什么遗漏吗？还是无法通过 Service Worker 实现？

一些额外信息：不能使用 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 授权的相同服务按预期工作。

【问题讨论】：

我不明白你的评论对XMLHttpRequest 意味着什么，因为它在 webWorkers 中是绝对支持的（参见this webWorker description on MDN 的文档）。你能发布所有相关的 webWorker 代码吗？我们需要看看哪里出了问题，而您在这里没有发布足够的代码。
@jfriend00 刚刚更新了代码以向您显示侦听器，流程代码无关紧要（它只是显示一个通知，其中包含检索到 JSON 中的信息）。我不知道为什么，如果我尝试在网络工作者中执行var xmlhttp = new XMLHttpRequest();，我会收到“未定义”错误。在网络工作者之外它工作得很好。谷歌浏览器 43.0.2357.134，ubuntu
抱歉，但我不知道 event.waitUntil() 或 fetch() 在做什么，因为它们不是标准函数（它们必须来自某个库）。我希望看到的是实际设置您所说的缺少的标头的代码，并且能够遵循足够的流程来查看请求是如何形成和发送的。您只是发布了更高级别的代码，没有显示可能发生问题的任何细节。
@jfriend00 这些函数不是来自库，检查一下：developers.google.com/web/updates/2015/03/introduction-to-fetch我的代码基于该示例：github.com/gauntface/simple-push-demo/blob/master/app/…
请求中缺少哪些确切的标头？

标签： javascript html jsp service-worker

【解决方案1】：

您还应该将accept和authorization

设置为允许的标头

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

“OPTIONS”请求的响应正文也应为空（确实没有必要，但在此类响应中没有正文的用例），Content-length: 应为 0（零）

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

【讨论】：

感谢@eicto，尝试过，但不幸的是，标题仍未发送。无法获得响应，因为请求本身在 Apache 被拒绝，因为它缺少身份验证标头。
您不应该要求 OPTIONS 的身份验证
实际上会有两个请求第一个 - OPTIONS 和第二个 - GET
所以第一个请求总是没有我要发送的标头？我在网络分析器（Chrome 开发工具）中没有看到这个
可以，用fiddler或者wireshark看看

【解决方案2】：

将 {"credentials": "include"} 作为参数传递给 fetch() 调用。

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

【讨论】：