Next.js中如何通过axios从需要授权的API接口获取数据？

排查解决步骤 #

• 首先确认Cookie数据解析逻辑正确
  Cookies.get()默认返回的是字符串格式的值，如果你存入user的时候是序列化的JSON字符串，取出后需要先反序列化才能正常读取token字段，直接使用原返回值会导致token传值错误。
  示例修正代码：

// 取出后先解析JSON
const user = JSON.parse(Cookies.get("user") || "{}")
const token = user.token

• 检查请求头携带规则是否匹配后端要求
  绝大多数接口的token鉴权要求将token放在Authorization请求头中，标准格式为Bearer ${token}，确认你发送请求时没有拼写错误、格式错误，也没有把token放在错误的参数位置（比如请求体、URL参数里）。
• 确认跨域场景下的配置正确
  如果前端站点域名和接口域名不一致，属于跨域请求：
  1. 前端发送请求时需要开启withCredentials: true配置，允许跨域请求携带Cookie
  2. 检查Cookie的Domain、SameSite、Secure属性是否配置正确，跨域场景下通常需要将SameSite设为None且开启Secure（仅HTTPS环境生效）
  3. 后端需要配置对应的CORS规则，允许前端域名访问且允许携带凭证
• 验证token本身有效性
  取出token后可以解析jwt内容，确认token未过期、签名有效、payload内的用户权限字段符合接口要求。

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