Supabase Edge function says no body was passed

Question

I'm invoking a supabase edge function with the following

    async function getData(plan_data){
        console.log(plan_data)
        console.log(JSON.stringify({plan_data}))
        const { data, error } = await supabase.functions.invoke("create-stripe-checkout",
        {
            body: JSON.stringify({
                plan_data
            }),
        }
        )
        console.log(data, error)
        // console.log(data)

    }

In the edge function I console logged the request and it stated bodyUsed: false. Essentially the edge function acts like and believes that no value was passed. (A value is passed to the getData function properly).I've played around with the syntax a bit to no avail, am I missing something?

EDIT: Edge function is as follows

import { serve } from "https://deno.land/[email protected]/http/server.ts"

serve(async (req) => {
  if (req.method === "OPTIONS"){
    return new Response (null, {
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "apikey, X-Client-Info, Authorization, content-type", 
      }
    })
  }
  console.log(req)
  const { planId } = await req.json()
  console.log(planId)
  return new Response(
    JSON.stringify({ planId }),
    { headers: { 
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Headers": "apikey, X-Client-Info, Authorization, content-type", 
      // "Content-Type": "application/json",
    } },
  )
})

EDIT: I tried running it with supabase's example code and had the same issue.

Answer 1

Seeing how this was a CORS error, I ended up allowing all headers in the preflight check response CORS headers.

I.e.

...
if (req.method === "OPTIONS"){
    return new Response (null, {
      headers: {
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Headers": "*", // <-- change here
      }
    })
  }
...

Answer 2

Does adding the content type header work?

async function getData(plan_data) {
  console.log(plan_data)
  console.log(JSON.stringify({ plan_data }))
  const { data, error } = await supabase.functions.invoke("create-stripe-checkout",
  {
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify({
      plan_data
    }),
  });
  console.log(data, error)
}

Answer 3

Supabase SDK will take care of json encoding, so you don't need to do it by yourself.

async function getData(plan_data){
        const { data, error } = await supabase.functions.invoke("create-stripe-checkout",
          {
             body: { plan_data },
          }
        )
        console.log(data, error)
      }

You should be able to get the data on your Edge Function like this:

const { plan_data } = await req.json()
console.log(plan_data)

Answer 4

After several days of having this same problem, and failing to get anywhere, here's what fixed it for me:

const { error } = await supabase.functions.invoke("deleteUser", {
        body: JSON.stringify({
          id: selUser.id,
        }),
      });

Key part was wrapping whatever was in body with JSON.stringify(). Which you did, so maybe try this:

const { error } = await supabase.functions.invoke("create-stripe-checkout", {
        body: JSON.stringify({
          id: plan_data.planId,
        }),
      });

then see if you can access the id in the edge function with:

const { id } = await req.json();