英文:
React App + Express JS Server + Axios frontend request = "undefined" options params on Server
问题
这是前端代码:
export const getBlog = (sortColumn, sortOrder) => async dispatch => {
console.log("blogActions.js => getBlog() executed.");
console.log("sortColumn = " + sortColumn);
console.log("sortOrder = " + sortOrder);
let options = {
order: [sortColumn, sortOrder]
};
try{
// 调用API,从端点获取所有反馈。
const res = await axios.get('/api/blog', options);
/*
{
params: {
sortColumn: "Heading",
sortOrder: "ASC"
}
} */
);
这是后端代码:
router.get('/', async (req, res) => {
console.log('/api/blog - get');
// 返回所有博客。
// 我们需要查询数据库以获取我们的数据。
// 我们将使用findAll()函数来执行此操作,以获取反馈表中的所有反馈。
// 注意:如果我们使用await,我们需要在(req, res)之前加上async。
console.log("req.query = " + req.query);
console.log("req.params = " + req.params);
//const { sortColumn, sortOrder} = req.params;
const { sortColumn, sortOrder} = req.query;
console.log(sortColumn);
console.log(sortOrder);
try{
const list = await Blog.findAll(
/*
{
order: [[sequelize.col(sortColumn)]]
}
*/
);
// 将列表发送回客户端。
res.send(list);
}
catch(e)
{
console.log(e); // 错误
}
});
请注意,我已经删除了HTML实体字符(例如"和'),以便更容易阅读。
英文:
I have Googled this problem over and over and can't seem to find the solution.
Here is my frontend code:
export const getBlog = (sortColumn, sortOrder) => async dispatch => {
console.log("blogActions.js => getBlog() executed.");
console.log("sortColumn = " + sortColumn);
console.log("sortOrder = " + sortOrder);
let options = {
order: [sortColumn, sortOrder]
};
try{
// call the api. Get all our feedback from our endpoint.
const res = await axios.get('/api/blog', options
/*
{
params: {
sortColumn: "Heading",
sortOrder: "ASC"
}
} */
);
Here is my backend code:
router.get('/', async (req, res) => {
console.log('/api/blog - get');
// Return all blog.
// We need to query our database to get our data.
// We will do this by using the findAll() function, to get all the feedback in the feedbacks table.
// Note: Remember if we use await, we need an async before(req, res).
console.log("req.query = " + req.query);
console.log("req.params = " + req.params);
//const { sortColumn, sortOrder} = req.params;
const { sortColumn, sortOrder} = req.query;
console.log(sortColumn);
console.log(sortOrder);
try{
const list = await Blog.findAll(
/*
{
order: [[sequelize.col(sortColumn)]]
}
*/
);
// send the list back to the client.
res.send(list);
}
catch(e)
{
console.log(e); // error
}
});
The req.query and req.params on the backend both result in "undefined".
Any ideas how to solve this problem?
Kind Regards,
John
Melbourne, Australia
This is the debugging output on the server when requesting data from the frontend client:
frontend request, VS Code server console
I have tried using Postman and the params get passed through just fine, as you can see here:
Postman
答案1
得分: 0
Axios 用于 URL 查询参数的选项是 params
...
> params
是要与请求一起发送的 URL 参数
> 必须是普通对象或 URLSearchParams 对象
如果你希望在 req.query
中接收到 sortColumn
和 sortOrder
参数,你需要像这样构建你的选项
axios.get("/api/blog", { params: { sortColumn, sortOrder } })
不过,需要注意的是,某些版本的 Axios 在处理 URL 查询序列化方面存在 bug。我始终建议使用 Fetch API 而不是 Axios。
const baseURL = process.env.REACT_APP_API_BASE_URL;
// 或者 "http://localhost:3001/",等等
const url = new URL("/api/blog", baseURL);
url.searchParams.append("sortColumn", sortColumn);
url.searchParams.append("sortOrder", sortOrder);
const res = await fetch(url);
const data = await res.json();
如果你想要使用 req.params
,你需要使用路由参数定义你的路由
router.get("/:sortColumn/:sortOrder", (req, res) => {
const { sortColumn, sortOrder } = req.params;
// ...
});
然后像这样发送请求
axios.get(
`/api/blog/${
encodeURIComponent(sortColumn)
}/${
encodeURIComponent(sortOrder)
}`
)
对于这种类型的请求,我不建议使用这种方法。
英文:
The Axios option for URL query parameters is params
...
> params
are the URL parameters to be sent with the request
> Must be a plain object or a URLSearchParams object
If you expect to receive sortColumn
and sortOrder
params in req.query
, you'll need to construct your options like this
axios.get("/api/blog", { params: { sortColumn, sortOrder } })
A word of warning though, some versions of Axios have a bug around URL query serialisation. I would always recommend using the Fetch API instead of Axios.
const baseURL = process.env.REACT_APP_API_BASE_URL;
// or "http://localhost:3001/", etc
const url = new URL("/api/blog", baseURL);
url.searchParams.append("sortColumn", sortColumn);
url.searchParams.append("sortOrder", sortOrder);
const res = await fetch(url);
const data = await res.json();
If you wanted to use req.params
, you'd need to define your route with route parameters
router.get("/:sortColumn/:sortOrder", (req, res) => {
const { sortColumn, sortOrder } = req.params;
// ...
});
and send the request like this
axios.get(
`/api/blog/${
encodeURIComponent(sortColumn)
}/${
encodeURIComponent(sortOrder)
}`
)
I would not recommend this method for this type of request.
答案2
得分: -1
尝试将您的axios get请求更改为以下内容,请求查询应该在req.query中存在:
axios.get(`/api/blog?sortColumn=${sortColumn}&sortOrder=${sortOrder}`);
英文:
try change your axios get to this, the req query should be there in req.query
axios.get(`/api/blog?sortColumn=${sortColumn}&sortOrder=${sortOrder}`);
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论