如何在Axios中发送带自定义Cookie的POST请求？

核心原因 #

浏览器环境下，当开启withCredentials: true时，浏览器会自动接管Cookie的管理，手动在headers中设置的Cookie字段会被浏览器忽略（这是同源策略的安全限制）。只有非浏览器环境（如Node.js）才能直接手动设置Cookie头。

分场景解决方案 #

场景1：浏览器环境 #

1. 先通过document.cookie设置Cookie
   确保Cookie的domain、path等属性与目标请求匹配，浏览器才会自动在请求中携带这些Cookie：

   // 逐个设置Cookie，注意替换为实际域名
   document.cookie = "ssoLang=en; domain=mypage; path=/; secure";
   document.cookie = "wt3_eid=%343632BJ335*; domain=mypage; path=/; secure";
   document.cookie = "usave=c8-0c-fb-45-98-2a; domain=mypage; path=/; secure";
   

   • secure：如果目标请求是HTTPS，需要添加该属性；HTTP则去掉。
   • domain：必须是请求域名的后缀（如请求https://mypage/...，domain设为mypage）。
   • path：一般设为/即可覆盖全站路径。

2. 发送请求时保留withCredentials: true
   无需手动在headers中加Cookie字段，浏览器会自动带上已设置的Cookie：

   axios.post('https://mypage/service/data', myPayload, {
     withCredentials: true,
     headers: { 'Content-Type': 'application/json' }
   })
   

场景2：Node.js环境 #

Node.js没有浏览器的同源限制，可以直接在headers中设置Cookie，但要确保Cookie字符串正确：

const cookieStr = 'ssoLang=en;wt3_eid=%343632BJ335*;usave=c8-0c-fb-45-98-2a';

axios.post('https://mypage/service/data', myPayload, {
  headers: {
    'Content-Type': 'application/json',
    'Cookie': cookieStr
  }
})

注意：Node.js环境下withCredentials配置无效，无需添加。

额外排查点 #

• 服务器需配置Access-Control-Allow-Credentials: true，且Access-Control-Allow-Origin不能为*，必须是具体的请求域名（浏览器环境下必填）。
• 检查代码中Cookie变量是否正确定义：你之前的代码中'Cookie':Cookie如果Cookie变量未初始化，会导致传递undefined，自然不生效。

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