跨域场景下axios无法携带Cookie中CSRF token到请求头如何解决？

解决方案 #

• 方案1：调整Cookie作用域（最便捷）
  你当前的XSRF-TOKEN Cookie仅作用于api.website.com，前端部署在admin.website.com属于不同子域，自然无法读取。修改后端生成Cookie时的Domain配置为.website.com（顶级域名前加小数点），即可让所有website.com的子域都能读取到该Cookie。匹配你的场景可配套配置：secure=true、SameSite=Lax、httpOnly=false，修改后无论是axios自动读取Cookie填充请求头，还是你写的拦截器手动提取，都能正常拿到token。

• 方案2：通过响应头传递token（完全规避Cookie跨域读取限制）
  你已经配置了CORS暴露X-XSRF-TOKEN响应头，完全可以在返回GET请求响应时，直接把XSRF-TOKEN的值放到X-XSRF-TOKEN响应头里返回给前端。前端收到响应后从响应头中提取token值，存储到localStorage/sessionStorage中，发起POST/PUT等请求时直接从存储中取出填充到请求头即可。
  注意：浏览器会自动把响应头转为小写，取值时要写response.headers['x-xsrf-token']，不要用驼峰格式取值。这种方案不依赖Cookie读取，同时withCredentials=true会自动把Cookie带到后端，仍然可以用双提交Cookie的校验逻辑，安全性不受影响。

• 方案3：调整后端校验逻辑（无需前端修改）
  因为你开启了withCredentials=true，发起POST请求时浏览器会自动把api.website.com下的所有Cookie（包括XSRF-TOKEN）带到后端，后端可以直接从请求携带的Cookie中读取XSRF-TOKEN的值做校验，不需要前端额外传递请求头。这种方案改动量最小，但防护强度略低于双提交Cookie模式，可根据业务安全要求选择。

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