使用Axios与TanStack useQuery调用Express API时404错误的解决及示例

问题概述 #

使用Axios和TanStack useQuery调用Express后端API时触发404 Not Found错误。后端通过MySQL获取数据的getCourses函数逻辑正常，用Insomnia发送POST请求能正常响应，但前端GET请求失败。

错误排查步骤 #

1. 修正Axios实例配置的错误 #

你的Axios实例配置存在两处关键问题：

• 硬编码了method: "GET"和url: "requisitions"，导致后续调用get("/courses")时，最终请求URL会拼接成http://localhost:8800/api/requisitions/courses，与后端实际路由不匹配
• headers格式错误，应该是对象而非数组，且Access-Control-Allow-Origin是后端CORS配置的响应头，不需要在前端请求头中设置

2. 确认后端路由的HTTP方法匹配 #

你提到Insomnia用POST请求能成功，但getCourses函数应该对应GET路由。需要确保courseRoutes中是用app.get而非app.post来绑定该函数。

3. 验证最终请求URL #

在浏览器开发者工具的Network面板中查看实际发送的请求URL，确认是否为http://localhost:8800/api/courses，排除路径拼接错误。

正确代码示例 #

修正后的Axios实例配置 #

import axios from "axios";

export const makeRequest = axios.create({
  baseURL: "http://localhost:8800/api/",
  withCredentials: true,
});

前端TanStack useQuery请求代码 #

import { useQuery } from "@tanstack/react-query";
import { makeRequest } from "./path-to-your-axios-instance";

const { isLoading, error, data } = useQuery({
  queryKey: ["courses"],
  queryFn: async () => {
    const res = await makeRequest.get("/courses");
    return res.data;
  },
});

后端courseRoutes路由配置示例 #

import express from "express";
import { getCourses } from "../path-to-your-controller";

const router = express.Router();

// 确保使用GET方法绑定getCourses函数
router.get("/", getCourses);

export default router;

后端主文件index.js（无需修改，确认路由挂载正确） #

import express from "express";
import userRoutes from "./routes/users.js";
import authRoutes from "./routes/auth.js";
import courseRoutes from "./routes/courses.js";
import cookieParser from "cookie-parser";
import cors from "cors";

const app = express();

app.use(express.json());
app.use(cors({ origin: "http://localhost:3000", methods: ["GET", "POST"], credentials: true }));
app.use(cookieParser());

app.use("/api/auth", authRoutes);
app.use("/api/users", userRoutes);
app.use("/api/courses", courseRoutes);

app.listen(8800, () => {
  console.log("API connected");
});

后端getCourses函数（逻辑正常，无需修改） #

export const getCourses = (req, res) => {
  const q = `SELECT c.*, u.id AS teacherId FROM courses AS c JOIN users AS u ON (u.id = c.teacherId)`;

  db.query(q, (err, data) => {
    if (err) return res.status(500).json(err);
    return res.status(200).json(data);
  });
};

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