使用react-query发送POST请求时返回401未授权问题求助

核心原因：axios.post参数顺序错误 #

你在react-query里调用makeRequest.post时，错误地将请求头(headers)和请求体(data)合并到同一个对象中作为第二个参数，违背了axios.post的参数规范。

axios.post的正确参数结构是：

axios.post(url, 请求体数据, 配置对象)

• 第一个参数：请求URL
• 第二个参数：要发送的请求体数据
• 第三个参数：请求配置（包含headers、params等）

你原来的useEffect代码是正确的：

makeRequest.post("get-tours", { data: date }, { headers })

但react-query中的写法把headers放到了请求体位置，导致后端无法收到正确的认证头，因此返回401未授权。

修正后的代码 #

const { isLoading, error, data } = useQuery(["tours", date], () =>
  makeRequest
    .post("get-tours", { data: date }, { headers })
    .then((res) => res.data)
);

额外注意点 #

• 将date加入query key（["tours", date]），确保date变化时react-query自动触发新请求，和原useEffect的依赖逻辑保持一致。
• 确认headers中包含正确的认证信息（如token），保证前后端认证逻辑匹配。

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