如何在获取请求中发送自定义 cookie答案

【问题标题】：How to send custom cookies in a fetch request如何在获取请求中发送自定义 cookie
【发布时间】：2021-09-01 22:21:52
【问题描述】：

我可以使用未在浏览器上设置的“自定义”cookie 发出获取请求吗？

例如：

fetch('/foo', {
  credentials: 'omit', // I don't want to send my real cookies
  headers: {
    cookie: 'foo=bar'
  }
})

使用credentials: 'omit' 执行此获取请求时，似乎没有设置cookie 标头。

我知道我可以保存当前的 cookie、设置新的 cookie、发出获取请求并恢复 cookie...但是有更好的方法吗？

例如。

const oldCookies = document.cookie
document.cookie = 'foo=bar'
fetch('/foo')
document.cookie = oldCookies

【问题讨论】：

标签： javascript cookies fetch

【解决方案1】：

同源，浏览器端fetch会一直使用document.cookie。

Cookie 标头是forbidden headers 之一，不能在浏览器端以编程方式修改。此规则不适用于服务器端。以下代码可以在页面https://httpbin.org/的Chrome DevTools控制台上进行测试。至于不同的来源，fetch 不会发送任何 cookie。

创建一个测试 cookie foo=bar

fetch('https://httpbin.org/cookies/set/foo/bar')
.then(response => response.json())
.then(data => console.log(JSON.stringify(data, null, 2)));

测试

fetch('https://httpbin.org/cookies', {
  headers: {
    Cookie: 'xxx=yyy'
  }
}).then(response => response.json())
.then(data => console.log(JSON.stringify(data, null, 2)));

【讨论】：

【解决方案2】：

尝试省略或包含：

fetch('/foo', {
  credentials: 'omit', // I don't want to send my real cookies
  headers: {
    'Set-Cookie': 'foo=bar'
  }
})

【讨论】：

设置cookie header出现在Chrome开发工具的请求信息中，但并未真正设置为cookie。
您是否尝试过使用凭据：'include'，？
Include 似乎添加了我现有的 cookie，但未发送 foo=bar;。
在请求中使用响应头不会改变请求的工作方式