https://supabase.com/ logo
Join Discord
Powered by
I'm confused. When I call my Edge Function with cu...
# javascript
c
I'm confused. When I call my Edge Function with curl from CLI I get a working and valid 200 response, but when I call it with fetch I get an error. > SyntaxError: Unexpected end of JSON input at JSON.parse () at Server. (file:///src/main.ts:207:45) at async Server.#respond (file:///src/main.ts:111:24) According to my testing, it looks like the body is not imported correctly, but I don't see how that can be the case. For troubleshooting I am logging
Copy code
JavaScript
console.log((await req.text()).length)
And from curl I get a valid number, but from fetch I get 0. Can anyone see/say what I am doing wrong in my fetch request?
Copy code
JavaScript
fetch(new Request('https://_exeample_.functions.supabase.co/login'), {
    method: 'POST',
    headers: new Headers({
        'Content-Type': 'application/json',
        'Authorization': 'Bearer anon-key-from-https://app.supabase.io/project/_exeample_'
    }),
    body: JSON.stringify({
        a: "A",
        b: "B"
    })
})
g
So in my testing from a browser, there is more work to be done to get an edge function to work. The browser issues a preflight option request for cors and if you have a simple function with just getting data it fails on the option request as there is no body.
https://github.com/supabase/supabase/issues/6267 This is what I had to do to get the js invoke to work...
c
Actually, I think mine is working.
Copy code
Request method: OPTIONS
Status code: 200 
Referrer policy: strict-origin-when-cross-origin
g
I got that json error until I split out the OPTION and POST requests....
But for sure it means there is a body problem
This is my working fetch call:
Copy code
export async function SBcallFunction() {
const body = JSON.stringify({doc:"abc",fileName:"myfile",name:"gary"})
    console.log('email')
    const response = await fetch(`https://supaurl.functions.supabase.co/get-pdf`, {
        method: 'POST',
        headers: {
            "Content-Type": "application/json",
            'Authorization':`Bearer authkey`
        },
        body:body,
    })
c
Yeah, that looks like mine (more or less). 😕
g
You can see my function at the link. Pretty close to the demo, well except for all the cors stuff....
c
How did you 
split out the OPTION and POST
?
Oh, wait! I think I get it! I'll try it.
> "Access-Control-Allow-Headers": "apikey,X-Client-Info, Content-Type, Authorization, Accept, Accept-Language, X-Authorization" Is 
apikey
a placeholder for the anon key?
g
When you call from supabase.functions.invoke() supabase includes an apikey header so I just said it was ok to have it in CORS
c
👍
g
In google cloud function there was a module I used that surround the function to handle cors. The same likely exists in Deno, but I did not find a quick example that made sense with the Supabase example function (serve) I was using. Since I'm running, I'll wait for someone to figure out the proper way and keep moving on.
c
I did not get it to work, not fully. I did now get a 200 response, but my response body was empty. Which should not be possible. 🙃 But I only made a quick test, I will take another look later. There might be some debug code left that I missed.
Woho! I got a response with data! 🥳
Thanks @User!
g
Did you need all the cors headers?
c
Don't know if I need them, but it worked when I added them to the POST response. I noticed that I only had added the headers to the OPTIONS response.
And now valid response data! 🥳 Now the function does what it is intended to do. Again, thanks for the help. 👍
g
Thanks, I'll mess with that as my expectation was only option needed the headers as they get cached (browser does not keep issuing option to same url). But in my scramble to figure things out may have missed that.
c
Thanks for the heads-up! That is almost how I solved it also. https://github.com/AI-Tournaments/Backend/blob/main/supabase/functions/login/index.ts
PreviousNext
Powered by