'React, Fetch sending empty body

So I have a problem about sending a request. Body is not empty at all since I can log it. But somehow when I make a request, the body is empty. It was weird so I copied a working request code that didn't send an empty body, guess what? Body empty. I have cors enabled.

empty body === second

image

  const handleSubmit = async (e) => {
    e.preventDefault()
    try {
      let data = new FormData()
      data.set("key", "")
      data.append("image", groupPFP.file)

      const res = await fetch("https://api.imgbb.com/1/upload", {
        method: "POST",
        body: data,
      })

      const parseRes = await res.json()

      if (parseRes.status === 200) {
        const imgbbLink = parseRes.data.display_url

        const resData = { groupProfileImage: imgbbLink, groupName, groupAbout }

        const res = await fetch("http://localhost:5000/api/group/create", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
            JwtToken: localStorage.getItem("JwtToken"),
          },
          body: JSON.stringify(resData),
        })

        const parseResPFP = await res.json()

        if (parseResPFP.status === 429) {
          return toast.error("Too Many Requests, try again later")
        }

        toast.success("Group created successfully")
      }
    } catch (error) {
      console.error(error)
    }
  }

No errors



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source