如何在 ServiceWorker 的响应中设置 cookie答案

【问题标题】：How to set cookies on a response in a ServiceWorker如何在 ServiceWorker 的响应中设置 cookie
【发布时间】：2017-06-07 23:17:29
【问题描述】：

在页面导航触发的获取处理程序中，我尝试这样做：

return event.respondWith(new Response('Hello!', {
  headers: {
    "Set-Cookie": "TestCookie=foo; path=/; Max-Age=60;"
    "TestHeader": "foo"
  }
}));

然后我在浏览器中加载任何 URL，并得到“你好！”身体。在 Chrome devtools 中，我在网络面板中看到了 TestHeader 设置。但是 cookie 没有显示在网络面板中，也没有显示在 Application > Cookies 查看器中。 document.cookie 也无法生成。

请求由页面导航发起，因此无法在从浏览器选项卡获取时设置credentials: "include"。

是否可以在 ServiceWorker 中的响应中添加 cookie？如果没有，是否有可能以任何其他方式编写cookie？

【问题讨论】：

标签： javascript performance service-worker

【解决方案1】：

Fetch 规范中有一些相关信息。

根据https://fetch.spec.whatwg.org/#forbidden-response-header-name：

禁止的响应标头名称是一个标头名称，它是匹配以下之一的字节大小写不敏感：

Set-Cookie

Set-Cookie2

然后根据https://fetch.spec.whatwg.org/#concept-headers-append 中的第 6 项：

否则，如果guard是“response”并且name是一个禁止的响应头名称，则返回。

在 Set-Cookie 标头中添加此限制适用于构造具有初始标头集的新 Response 对象，或在事后将标头添加到现有 Response 对象。

计划在服务工作者内部添加对读取和写入 cookie 的支持，但这将使用 Response 对象中的 Set-Cookie 标头以外的机制。 this GitHub issue 有更多关于计划的信息。

【讨论】：

【解决方案2】：

您可以尝试以下操作：

async function handleRequest(request) {
    let response = await fetch(request.url, request);       
    // Copy the response so that we can modify headers.
    response = new Response(response.body, response)
    response.headers.set("Set-Cookie", "test=1234");
    return response;
}

【讨论】：