API调用时Async Storage中Token传递至后端出现Bearer undefined问题

核心问题定位 #

前端能正常获取并打印Token，但后端保护路由收到的Authorization头为Bearer undefined，说明Token未正确传递到请求头中，大概率是参数传递、RTK Query配置或跨域设置导致。

排查与解决步骤 #

1. 确认updateUser调用时的参数传递正确性 #

检查组件中调用updateUser mutation的代码，确保token参数正确传入：

// 正确示例
const updateUserMutation = useUpdateUserMutation();
const handleSubmit = () => {
  const { token } = userInfo;
  console.log(token); // 确认此处打印正常
  updateUserMutation({ data: formData, token }); // 确保token参数正确传递
};

如果调用时误传userInfo而非userInfo.token，会直接导致Bearer undefined。

2. 优化RTK Query的baseQuery配置，统一处理Authorization头 #

避免在每个端点手动设置headers，通过prepareHeaders统一注入Token，减少手动传参的出错概率：

const baseQuery = fetchBaseQuery({
  baseUrl: "http://localhost:8000",
  prepareHeaders: (headers, { getState }) => {
    // 直接从Redux状态中获取userInfo
    const { userInfo } = getState().auth;
    if (userInfo?.token) {
      headers.set('Authorization', `Bearer ${userInfo.token}`);
    }
    return headers;
  },
});

export const apiSlice = createApi({ 
  baseQuery, 
  tagTypes: ["User"], 
  endpoints: (builder) => ({}) 
});

之后修改updateUser端点，无需手动设置headers：

updateUser: builder.mutation({
  query: (data) => ({
    url: `${USERS_URL}/profile`,
    method: "PUT",
    body: data,
  })
});

3. 检查后端CORS配置，允许Authorization头 #

后端需确保CORS配置明确允许Authorization头跨域，否则浏览器会拦截该头：

// 后端Express示例
const cors = require('cors');
app.use(cors({
  origin: "http://localhost:3000", // 替换为你的前端实际地址
  credentials: true,
  allowedHeaders: ['Content-Type', 'Authorization'] // 明确添加Authorization头
}));

4. 验证实际发送的请求头 #

使用React Native调试工具或浏览器Network面板，查看请求的Request Headers中Authorization字段是否正确。如果此处显示Bearer undefined，说明前端参数传递有误；如果显示正确但后端仍收不到，需检查后端路由是否正确挂载了protect中间件，或中间件逻辑是否存在疏漏。

5. 确认AsyncStorage存储的userInfo结构 #

检查登录后存入AsyncStorage的userInfo是否包含正确的token字段：

// 在组件中验证
const userInfo = JSON.parse(await AsyncStorage.getItem('userInfo'));
console.log(userInfo.token); // 确认token存在且格式正确

确保登录接口返回的token完整传递给了setCredentials的payload。

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