基于json-server的聊天应用请求对话无数据，提示缺失Authorization头

我正在开发一款基于json-server的聊天应用，发起带搜索条件的对话请求时（请求地址：http://localhost:9000/conversations?participants_like=tushin@gmail.com&_sort=timestamp&_order=desc&_page=1&_limit=5），接口返回200状态码，但未返回数据。查看json-server日志，发现提示“missing authorization header”。

相关代码 #

对话API #

import { apiSlice } from "../api/apiSlice";

export const conversationsApi = apiSlice.injectEndpoints({
    endpoints: (builder) => ({
        getConversations: builder.query({
            query: (email) => `/conversations?participants_like=${email}&_sort=timestamp&_order=desc&_page=1&_limit=5`, 
        })
        
    })
})

export const {useGetConversationsQuery } = conversationsApi;

对话Slice #

import { createSlice } from '@reduxjs/toolkit'
const initialState = {}

const conversationsSlice = createSlice({
    name: "conversations",
    initialState,
    reducers: {}
})

// export const { } = conversationsSlice.actions;
export default conversationsSlice.reducer;

apiSlice #

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const apiSlice = createApi({
    reducerPath: "api", 
    baseQuery: fetchBaseQuery({
        baseUrl: process.env.REACT_APP_API_URL,
        prepareHeaders: async (headers, { getState, endpoint }) => {
            const token = getState()?.auth?.accessToken;
            if (token) {
                headers.set("Authorization", `Bearer ${token}`);
            }
            console.log(headers)
            return headers;
        }
    }), 
    tagTypes: [],
    endpoints: (builder) => ({
        
    })
}) 

原因分析 #

日志明确提示缺失授权头，结合代码来看，问题大概率出在请求未携带服务器要求的授权信息：

1. getState()?.auth?.accessToken未获取到有效token，导致Authorization头没被设置
2. json-server配置了授权校验逻辑，当请求无授权头时，返回空数据而非401状态码

解决方案 #

1. 确认token是否正确存储 #

在prepareHeaders中添加日志，检查token是否存在：

prepareHeaders: async (headers, { getState, endpoint }) => {
    const token = getState()?.auth?.accessToken;
    console.log('当前获取的token:', token); // 新增日志
    if (token) {
        headers.set("Authorization", `Bearer ${token}`);
    }
    console.log(headers)
    return headers;
}

如果token为空，需要先完成用户登录流程，确保accessToken被正确存入redux的auth状态。

2. 临时添加测试授权头（用于验证） #

如果是测试阶段，可以手动添加一个测试用授权头，确认服务器是否能正常返回数据：

prepareHeaders: async (headers, { getState, endpoint }) => {
    // 临时添加测试token，后续替换为真实逻辑
    headers.set("Authorization", `Bearer test-valid-token`);
    const token = getState()?.auth?.accessToken;
    if (token) {
        headers.set("Authorization", `Bearer ${token}`);
    }
    console.log(headers)
    return headers;
}

同时要确保json-server的授权校验逻辑认可这个测试token。

3. 优化请求参数写法 #

RTK Query支持更规范的查询参数写法，避免手动拼接URL的潜在问题：

getConversations: builder.query({
    query: (email) => ({
        url: '/conversations',
        params: {
            participants_like: email,
            _sort: 'timestamp',
            _order: 'desc',
            _page: 1,
            _limit: 5
        }
    })
})

4. 检查json-server授权配置 #

确认json-server是否使用了json-server-auth或自定义中间件，验证中间件逻辑是否正确：

• 检查授权头的校验规则
• 确认缺失授权头时的返回逻辑（是否应该返回401而非空数据）

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