如何在客户端发送带httpOnly JWT Cookie的Axios请求？

我搭建的服务器会在用户登录后向浏览器下发JWT Cookie，并设置httpOnly: true以防范XSS攻击。现在需要通过客户端（使用Axios和JavaScript）向服务器发送请求，但无法在客户端获取该Cookie，请问该如何携带JWT发送请求？

若未设置httpOnly: true，我会采用以下方式实现，但设置后jwt会变为undefined：

const jwt = Cookies.get('jwt')

axios.get('/Any address', {
    headers: {
      Authorization: `Bearer ${jwt}`,
    },
    withCredentials: true,
  }).then(function (response) {
    console.log(response)
  }).catch(function (error) {
    console.log(error)
  })

设置了httpOnly: true的Cookie本身就禁止前端JavaScript直接读取，这是它防范XSS攻击的核心设计，所以你之前手动读取Cookie再塞进Authorization头的思路完全行不通。

正确的做法是依赖浏览器的自动Cookie携带机制——只要Axios请求配置正确，浏览器会自动把符合条件的HttpOnly Cookie附加到请求中发送给服务器，不需要你手动处理。

调整后的代码如下：

axios.get('/Any address', {
  // 核心配置：开启withCredentials，允许浏览器自动携带Cookie
  withCredentials: true
}).then(function (response) {
  console.log(response)
}).catch(function (error) {
  console.log(error)
})

需要额外注意的几点：

• 服务器端要确保Cookie的domain、path参数配置正确，保证请求的URL和Cookie的作用域匹配，否则浏览器不会自动携带Cookie。
• 如果是跨域请求，服务器必须配置CORS响应头：Access-Control-Allow-Credentials: true，同时Access-Control-Allow-Origin不能设为*，必须指定具体的前端域名。

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