axios请求如何携带accessToken？配置withCredentials无效怎么办

常见误区排查 #

• withCredentials: true 不负责携带自定义存储的accessToken
  该配置的作用仅为：跨域请求时允许浏览器自动携带对应域名下的Cookie，同时允许前端接收响应中的Set-Cookie头。如果你将accessToken存储在localStorage、sessionStorage或前端内存变量中，添加该配置不会自动将token注入请求头，这是最常见的误用场景。
• 跨域场景下服务端CORS配置不匹配
  如果你确实通过Cookie存储认证凭证，仅前端配置withCredentials: true无法生效，服务端必须返回匹配的CORS响应头，否则浏览器会直接拦截请求：
  • Access-Control-Allow-Origin 不能设置为通配符*，必须明确指定前端页面的实际源地址（例如本地开发的http://localhost:5173、线上部署的前端域名）
  • 必须返回Access-Control-Allow-Credentials: true响应头，与前端配置对应
• 代码未手动注入认证头
  Postman、Insomnia等接口工具可以请求成功，本质是你在工具中手动添加了Authorization等认证字段，浏览器端axios不会自动读取本地存储的token并注入请求头。

修复方案 #

根据你的token存储方式二选一即可：

1. 前端存储token（localStorage/sessionStorage/内存）
   不需要开启withCredentials，手动在请求头中添加认证字段即可，参考代码：

   // 从存储位置读取登录时拿到的accessToken
   const accessToken = localStorage.getItem('accessToken')
   try {
     await axios({
       url: `https://crayonnne-jotter-server.herokuapp.com/api${url}`,
       method: "get",
       headers: {
         // 按后端要求的格式拼接，绝大多数场景为Bearer前缀
         'Authorization': `Bearer ${accessToken}`
       }
     }).then((res) => {
       console.log(res) 
     });
   } catch (err) {
     console.log(err)
   }
   

   最优实践是配置axios全局请求拦截器，统一为所有需要认证的接口注入请求头，避免重复编码。
2. HttpOnly Cookie存储token（安全性更高，可防范XSS窃取凭证）
   先调整后端CORS配置符合前述要求，保留withCredentials: true配置即可，不需要手动添加Authorization头，浏览器会自动在跨域请求中携带匹配的Cookie。

   额外注意：跨站场景下使用Cookie凭证，需要服务端给Cookie设置SameSite: None属性，同时开启Secure属性（仅HTTPS环境下生效），否则浏览器会阻止Cookie携带。

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