React中Fetch请求头设置Cookie不显示，求排查代码问题

你的代码里手动设置Cookie请求头但在开发者工具中看不到，主要有以下几个原因和对应的修复方法：

1. Fetch缺少credentials配置 #

fetch API默认不会自动携带Cookie，即使你手动在headers里添加Cookie字段，浏览器可能会因为跨域或同源策略限制而忽略这个设置。

修复方法：在fetch的配置对象中添加credentials选项：

• 如果是同域请求，设置credentials: 'same-origin'（默认值，但显式声明更清晰）
• 如果是跨域请求，设置credentials: 'include'，同时需要后端配合返回Access-Control-Allow-Credentials: true，并且Access-Control-Allow-Origin不能是*，必须是你的前端具体域名。

修改后的代码示例：

async ({ username, password, captcha, idCaptcha }, thunkAPI) => {
    console.log(idCaptcha)
    const response = await fetch(`${API_ACCOUNT}/auth/login`, {
      method: 'POST',
      credentials: 'include', // 根据场景选same-origin或include
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: `username=${username}&password=${password}&grant_type=password&captcha=${captcha}`,
    })
})

2. 手动设置Cookie头的局限性 #

浏览器对跨域请求中手动设置Cookie头有严格限制，即使你写了Cookie: 'JSESSIONID=' + idCaptcha，跨域场景下浏览器也会拦截这个字段。更可靠的方式是先把Cookie写入浏览器的Cookie存储，再让fetch自动携带：

// 先写入Cookie（注意domain和path要和后端匹配）
document.cookie = `JSESSIONID=${idCaptcha}; path=/; domain=你的后端域名`;

// 再发起请求，带上credentials选项
const response = await fetch(`${API_ACCOUNT}/auth/login`, {
  method: 'POST',
  credentials: 'include',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: `username=${username}&password=${password}&grant_type=password&captcha=${captcha}`,
})

3. 检查浏览器Cookie策略 #

确保你的Cookie的SameSite属性、域名、路径与请求地址匹配，否则浏览器会拒绝发送该Cookie。比如如果后端设置的Cookie是SameSite=Strict，而你的请求是跨域的，也会导致Cookie无法发送。

内容的提问来源于stack exchange，提问作者Rafy