React前端Axios无法传递请求参数至Express后端问题排查

场景说明 #

React前端通过useEffect钩子+Axios发送GET请求到自建Express后端，后端负责对接TMDB的第三方API（用于隐藏API密钥）。前端通过Axios的params传递query参数，但后端拼接第三方API URL时，该参数始终是undefined；将query设为静态值（如"war"）时，请求正常。

前端代码 #

useEffect(() => {
    const options = {
      method: "GET",
      url: `http://localhost:8080/api/v1/postersgrid`,
      params: { query: props.query },
    };

    axios
      .request(options)
      .then((res) => {
        console.log(res);
        setResults(res.data.results);
        setTotalPages(res.data.total_pages);
        setSuccessfulRequest(true);
      })
      .catch((err) => {
        console.log(err);
        setSuccessfulRequest(false);
      });
  }, [props.query]);

后端代码（原错误版本） #

const express = require("express");
const cors = require("cors");
const axios = require("axios");

const PORT = 8080;
const app = express();

app.use(cors());
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

app.get("/api/v1/postersgrid", (req, res) => {
  const options = {
    method: "GET",
    url: `https://api.themoviedb.org/3/search/movie?api_key=${APIKEY}&query=${req.query}`,
  };

  axios
    .request(options)
    .then((response) => {
      res.json(response.data);
    })
    .catch((error) => {
      console.log(error);
    });
});

问题根源 #

Express中req.query是一个对象，包含了所有URL查询参数。直接将整个req.query对象拼接到URL中，相当于把[object Object]转为字符串，而不是获取到前端传递的query参数值。正确的做法是通过req.query.query来提取具体的参数值。

修正方案 #

修正后的后端代码 #

const express = require("express");
const cors = require("cors");
const axios = require("axios");

const PORT = 8080;
const APIKEY = "你的TMDB API密钥"; // 确保此处已正确配置密钥
const app = express();

app.use(cors());
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

app.get("/api/v1/postersgrid", (req, res) => {
  // 提取前端传递的query参数
  const userQuery = req.query.query;

  // 校验参数是否存在，避免无效请求
  if (!userQuery) {
    return res.status(400).json({ error: "查询参数query不能为空" });
  }

  // 改用Axios的params配置传递参数，自动处理URL编码
  const options = {
    method: "GET",
    url: "https://api.themoviedb.org/3/search/movie",
    params: {
      api_key: APIKEY,
      query: userQuery
    }
  };

  axios
    .request(options)
    .then((response) => {
      res.json(response.data);
    })
    .catch((error) => {
      console.error("第三方API请求失败:", error);
      res.status(500).json({ error: "服务器内部错误" });
    });
});

关键修改点 #

1. 提取正确参数：用req.query.query替代req.query，获取前端传递的具体查询值
2. 参数校验：新增空参数判断，提前返回错误响应，避免无效的第三方API请求
3. 规范参数传递：改用Axios的params配置来传递参数，Axios会自动处理URL编码，比手动拼接URL更安全、不易出错

内容的提问来源于stack exchange，提问作者Davide _-