使用httponly cookie实现Santum授权时如何将cookie带入请求头？

• 核心认知纠正

httpOnly Cookie的设计目的就是禁止前端JavaScript读写，避免XSS攻击盗取token。你当前代码中调用setCookie时设置httpOnly: true不会生效，也无法通过前端JS完成httpOnly Cookie的写入。正确的实现逻辑是将Cookie写入操作交给后端：登录接口校验账号密码通过后，直接在响应头返回Set-Cookie字段，将token存入httpOnly Cookie，浏览器收到响应后会自动存储该Cookie。

• 配置请求自动携带Cookie
  你不需要手动将Cookie内容放到请求头中，只要给你使用的请求实例（代码中的instance，大概率是axios实例）开启withCredentials配置即可，浏览器会自动将同域下的所有Cookie（包括httpOnly类型的token Cookie）附加到请求中发送给后端：

// 创建请求实例时全局配置
const instance = axios.create({
  baseURL: '你的后端服务地址',
  withCredentials: true // 核心配置，开启请求自动携带Cookie
})

如果是跨域部署的场景，后端需要额外配置CORS规则：

1. Access-Control-Allow-Credentials设置为true
2. Access-Control-Allow-Origin不能设置为通配符*，需要填写你前端的实际访问域名

• 放弃httpOnly方案的备选实现
  如果你不需要使用httpOnly Cookie，可以去掉setCookie中的httpOnly: true配置，然后给请求实例添加拦截器，手动将token附加到请求头：

// 请求拦截器配置
instance.interceptors.request.use((config) => {
  // 从Cookie中读取token
  const token = cookies.Authorize
  if (token) {
    // 按Sanctum要求的格式添加授权头
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

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