发出 Fetch API 请求时无法将对象作为有效负载数据发送

Question

I have a react frontend and node backend, I am fetching a list of objects from an external API using Axios and then trying to pass it to my node backend. The issue is that the node backend is not able to receive this payload data on the backend, req.body returns an empty object. To debug, I've seen what happens in the network tab, and have observed that the payload data just returns the data type instead of the actual data as shown below.

enter image description here Here is what my front-end code looks like:

let faqlist = "";
// fetching data from one api
await axiosinstance
  .get(
    "https://linktotheapi/api/faq"
  )
  .then((res) => {
    faqlist = res.data;

    console.log("This is faqlist", faqlist);
    console.log(typeof faqlist);
    // passing the data fetched from 1st api to node/express backend.
    fetch("/create-page", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json",
      },
      body: faqlist,
    });
    
  });}

Answer 1

You can stringify the array of objects before sending. Use JSON.stringify

const x = [{ x: 1 }, { x: 2 }];
  fetch("https://httpbin.org/post", {
    method: "POST",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json"
    },
    body: JSON.stringify(x)
  });