JavaScript如何携带Cookie发送POST请求

方案1：fetch API 实现 #

核心配置是将credentials参数设为include，即可让浏览器自动携带目标域名下的对应Cookie：

fetch('https://你的目标接口地址', {
  method: 'POST',
  credentials: 'include', // 允许跨域携带Cookie的关键配置
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    // 你的请求参数
  })
}).then(res => res.json())
  .then(data => console.log('请求返回结果：', data))
  .catch(err => console.error('请求异常：', err))

credentials参数可选值说明：

• omit：默认值，所有请求都不携带Cookie
• same-origin：仅同域名请求携带Cookie
• include：同域、跨域请求均携带Cookie

方案2：XMLHttpRequest 实现 #

如果需要兼容旧场景，可以用XHR实现，核心配置是开启withCredentials：

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://你的目标接口地址');
xhr.withCredentials = true; // 允许跨域携带Cookie的关键配置
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onload = function () {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log('请求返回结果：', JSON.parse(xhr.responseText));
  } else {
    console.error('请求失败：', xhr.statusText);
  }
};
xhr.onerror = function () {
  console.error('网络请求异常');
};
xhr.send(JSON.stringify({
  // 你的请求参数
}));

必要前置与注意事项 #

• 目标接口的服务端必须正确配置CORS规则：
  • Access-Control-Allow-Origin不能设置为*，必须明确指定你用Selenium打开的当前页面的域名
  • 必须配置Access-Control-Allow-Credentials: true
  • 如果你需要手动传递自定义Cookie头，还需要配置Access-Control-Allow-Headers: Cookie
• 前端JS无法直接为跨域域名手动设置Cookie，如果目标域名下还没有你需要的Cookie，可以先通过Selenium的add_cookie方法添加：先访问一次目标域名的根路径，再调用add_cookie写入对应Cookie，之后发请求就会自动携带。
• 如果不需要使用浏览器存储的标准Cookie，也可以直接在请求头里加入自定义身份标识字段（比如Authorization），只要服务端CORS配置允许该头即可，不受Cookie跨域规则限制。

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