Axios 前端似乎没有将请求参数传递给后端

Question

我有这个钩子对我的前端执行http请求获取数据显示在页面

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);
});
});

此后端与我拥有API密钥的API通信。我想要的是:

1. 前端查询隐藏api key的后端
2. 后端查询api并将数据返回给前端

现在的问题是，当我试图传递参数从前端到后端

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

这里我想把传递给后端但当我在url中使用它向API执行HTTP请求时

就变成undefined或null了

url: `https://api.themoviedb.org/3/search/movie?api_key=${APIKEY}&query=${req.query}`,

来证明这是有效的，如果我将查询更改为静态

url: `https://api.themoviedb.org/3/search/movie?api_key=${APIKEY}&query=war`

一切工作如预期，我错在哪里?顺便说一句，我正在做所有这些，而不是直接从前端执行请求，以正确隐藏我的api密钥

Answer 1

必须更改

url: `https://api.themoviedb.org/3/search/movie?api_key=${APIKEY}&query=${req.query}

url: `https://api.themoviedb.org/3/search/movie?api_key=${APIKEY}&query=${req.query.query}