Nuxt 3 useFetch携带Authorization头请求返回401错误求助

既然Postman测试也返回401，说明问题大概率不在前端代码本身，而是token有效性、请求头格式或者后端验证逻辑的问题，按以下步骤排查：

• 验证token本身是否有效

  • 检查token是否过期：如果是JWT，直接解析看exp字段对应的时间是否晚于当前时间。
  • 确认token无拼写错误：复制时有没有多空格、少字符，尤其是从生成工具复制时容易出现这类问题。
  • 确认token权限匹配：后端是否要求该token具备访问/bus_stops接口的权限，比如角色、scope设置是否符合要求。

• 修正请求头格式

  • HTTP头理论上不区分大小写，但部分后端框架严格要求首字母大写的Authorization，把代码里的authorization改成Authorization试试：

    await useFetch(`${config.public.baseUrl}/bus_stops`, {
        method: 'GET',
        watch: false,
        headers: {
            Authorization: `Bearer ${authToken.value}`, // 首字母大写
        },
        params: params,
        onResponse({response}) {
            busStops.value = [];
            // @ts-ignore
            busStops.value = response._data.data;
            isLoading.value = true;
        },
    });
    

  • 确保Bearer和token之间有且只有一个空格，不要漏写或多写。

• 排查后端验证逻辑

  • 检查后端是否正确读取Authorization头：如果用了反向代理（比如Nginx），确认代理配置没有过滤掉这个头，比如是否设置了proxy_set_header Authorization $http_authorization;。
  • 确认后端token验证逻辑正确：比如JWT解析用的密钥是否和生成时一致，签名算法是否匹配。
  • 检查是否需要额外请求头：部分接口可能要求携带Content-Type: application/json，可以尝试在headers里添加该字段测试。

• 简化请求测试

  • 在Postman里发送最简请求：只带Authorization头，去掉多余参数，看是否能返回200。如果还是401，直接确认是token或后端的问题。
  • 用后端重新生成的有效token测试，排除旧token失效的可能。

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