Fetch API POST请求中CSRF Token无法写入请求头的问题求助

问题分析 #

从你的代码来看，能成功获取CSRF Token但请求头里看不到，核心问题有几个：

• Headers对象的打印方式错误：直接打印Headers实例无法直观显示所有键值对，需要用get()方法验证Token是否存在
• Content-Type与请求体格式不匹配：你用JSON.stringify()处理请求体，但Content-Type设为x-www-form-urlencoded，前后格式冲突
• 变量作用域不规范：sendCartDataToBackend里的headers未声明为局部变量，可能引发意外覆盖
• 请求体序列化错误：用${userCartObject}会把对象转为[object Object]字符串，无法正确传递数据

修复步骤及代码 #

1. 修正Content-Type：因为请求体是JSON格式，将Content-Type改为application/json
2. 正确验证Headers：用headers.get('X-CSRF-Token')代替直接打印Headers对象
3. 规范变量作用域：给headers加上const声明，避免全局污染
4. 修复请求体序列化：直接传递原始对象，不要用模板字符串处理

修复后的完整代码：

function getCookie(name) {
  if (!document.cookie) {
    return null;
  }

  const xsrfCookies = document.cookie.split(';')
    .map(c => c.trim())
    .filter(c => c.startsWith(name + '='));

  if (xsrfCookies.length === 0) {
    return null;
  }
  return decodeURIComponent(xsrfCookies[0].split('=')[1]);
}

function getHeader() {
  const csrfToken = getCookie('csrftoken');
  console.log('csrftoken:', csrfToken);
  // 匹配JSON请求体的Content-Type
  const headers = new Headers({
    'Content-Type': 'application/json',
    'X-CSRF-Token': csrfToken
  });
  // 验证Token是否已添加到请求头
  console.log('CSRF Token in headers:', headers.get('X-CSRF-Token'));
  return headers;
}

function sendCartDataToBackend(userCartObject) {
  // 直接构造请求体对象
  const sendingData = { body: userCartObject };
  // 声明局部变量headers
  const headers = getHeader();
  
  fetch("http://127.0.0.1:8000/order/new/", {
    method: 'POST',
    headers: headers,
    credentials: 'include',
    body: JSON.stringify(sendingData),
  })
  .then(res => res.json())
  .then(json => console.log(json))
  .catch(err => console.log(err));
}

额外说明 #

• 如果后端要求表单格式提交（application/x-www-form-urlencoded），则需用new URLSearchParams()处理请求体，而非JSON.stringify()
• 确认后端CSRF验证的字段名与前端一致，部分框架用X-XSRF-TOKEN而非X-CSRF-Token，需对应调整

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