为什么express服务器接收到的前端数据是未定义的？

我目前正在开发社交媒体 Mern Stack React 应用程序。我使用 Node js 和 Express 作为我的后端服务，还使用 ​​mongoose 来存储我的数据，并使用 axios 和 redux thunk 将后端连接到前端。到目前为止，我在向服务器接收和发送数据时没有遇到任何问题。现在我正在尝试根据用户输入的关键字创建搜索帖子获取请求。问题在于，当我将关键字发送到服务器而不是接收字符串时，它会得到未定义的值，就像 redux thunk 不发送任何内容一样。如果有人能帮助我，我将非常感激。我一遍又一遍地查看代码，但找不到原因。

我的后控制器类（我只复制了相关函数）：

import express from "express";
const app = express();
import Post from "../model/PostModel.js";
import ErrorHandlng from "../utilities/ErrorHandling.js";
import bodyParser from "body-parser";
import catchAsync from "../utilities/CatchAsync.js";
import User from "../model/UserModel.js";
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

export const getPosts = catchAsync(async (req, res, next) => {
  const data = req.body.keyword;
  const page = parseInt(req.query.page || "0");
  const PAGE_SIZE = 20;
  const query = new RegExp(data, "i");
  const total = await Post.countDocuments({});
  const posts = await Post.find({ $or: [{ title: query }, { content: query }] })
    .limit(PAGE_SIZE)
    .skip(PAGE_SIZE * page);
  if (!posts) {
    return next(new ErrorHandlng("No posts were found", 400));
  }
  res.status(200).json({
    status: "success",
    data: {
      totalPages: Math.ceil(total / PAGE_SIZE),
      posts,
    },
  });
});

我的 api 类（前端，仅复制该特定 get 请求的调用）：

import axios from "axios";
const baseURL = "http://localhost:8000";
axios.defaults.withCredentials = true;
const API = axios.create({
  baseURL,
  credentials: "include",
  headers: {
    Accept: "application/json",
    "Content-Type": "application/json",
  },
});
export const getPostsByKeyword = (keyword, page) =>
  API.get(`/post/getPostsByKey?page=${page}`, keyword);

切片后类：

export const fetchPostsByKeyWord = createAsyncThunk(
  "post/getKeyword",
  async ({ keyword, page }, { fulfillWithValue, rejectWithValue }) => {
    try {
      const response = await api.getPostsByKeyword(keyword, page);
      if (response.statusCode === "400") {
        throw new Error("There are no available posts");
      }
      const fetchData = await response.data.data.posts;
      const totalPages = await response.data.data.totalPages;
      return fulfillWithValue({ fetchData, totalPages });
    } catch (err) {
      console.log(err.response.message);
    }
  }
);
const initialState = { status: "undefined" };
const PostSlice = createSlice({
  name: "post",
  initialState,
  reducers: {},
  extraReducers: {},
});
export const postActions = PostSlice.actions;
export default PostSlice;

调用后端：

dispatch(fetchPostsByKeyWord({ keyword, page }))
  .unwrap()
  .then((originalPromiseResults) => {
    console.log("thte " + " " + originalPromiseResults.totalPages);
    console.log("The data is" + originalPromiseResults.fetchData);
    setTotalPages(originalPromiseResults.totalPages);
  })
  .catch((err) => {
    console.log(err.message);
  });

正如您所看到的，我没有复制整个代码，我只复制了与问题相关的部分。

浏览器当前无法发送带有请求正文的 GET 请求。XMLHttpRequest（Axios 使用的）将忽略它并且fetch()会触发错误。

也可以看看带请求正文的 HTTP GET https://stackoverflow.com/q/978061/283366关于为什么尝试这可能是一个坏主意的额外讨论。

您应该传递查询字符串中所需的所有内容，最好通过params选项，因此它被正确编码...

export const getPostsByKeyword = (keyword, page) =>
  API.get("/post/getPostsByKey", { params: { page, keyword } });

并通过获取数据req.query服务器端。

const { page, keyword } = req.query;

使用普通 JS，您可以使用URL搜索参数 https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams构造查询字符串...

const params = new URLSearchParams({ page, keyword });

// XHR
const xhr = new XMLHttpRequest();
xhr.open("GET", `/post/getPostsByKey?${params}`);

// Fetch
fetch(`/post/getPostsByKey?${params}`); // GET is the default method

您的 Axios 实例创建也可以简单得多......

1. Axios 通常非常擅长设置正确的content-type标题，你不必
2. 您的 Express 应用程序不进行任何内容协商，因此您无需设置accept header
3. 除非您实际上正在使用 cookie（看起来并不像），否则您不需要凭证支持

const API = axios.create({ baseURL });