Set CORS headers for Edge Functions 401 response

[acurrieclark]

Bug report

Describe the bug

When attempting to call an edge function with a bad token, the function rightly issues a 401 response. However, while CORS headers appear to be set for the preflight OPTIONS request, they are not for the subsequent POST request, resulting in the browser seeing a failed fetch rather than the 401 response.

To Reproduce

fetch(
    import.meta.env.SUPABASE_FUNCTION_URL,
  {
    method: "POST",
    headers: {
      Authorization: "Bearer bad-token",
      "Content-Type": "application/json",
    },
  }
)
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  });

When CORS is enabled in the browser, an error is caught. With CORS disabled (in the browser), the response is properly logged.

Expected behavior

The response should have appropriate CORS headers set.

System information

• OS: OS X 12.5.1
• Browser: Brave (also confirmed in Chrome)

[laktek]

@acurrieclark You will need to add a CORS check on your function. Check the example in the guide on how to implement it in your function.

[acurrieclark]

I have a CORS check in my function. What I am saying is that if I hit the endpoint with a bad token, it never reaches the function itself and the 401 response (which I have no control over) doesn’t include CORS headers.

[laktek]

Sorry misunderstood your question. Looks like this is a bug in our end. Will post a fix for it this week.

[laktek]

We've deployed a fix for this issue. Can you check if the error statuses are returned correctly on your functions?

[acurrieclark]

Works as expected locally. Will close for now and reopen if it doesn't work in production.

Thanks so much for the quick turnaround.

[acurrieclark]

I am finding this same issue has popped back up on a new project of mine. Same issue, currently running on a local dev Supabase function.

[GaryAustin1]

@acurrieclark Is this still an issue for you, or did it get resolved. Not much info in your last post and getting stale.

[acurrieclark]

Hi @GaryAustin1, good point. Not checked in a while. Will update to the latest version of CLI and test for you now.

[acurrieclark]

Just run another test, and I can confirm that I am still seeing the error. It just means that I need to handle to error with an extra try/catch block outside any fetch request. Note that this only happens when the bearer token is not valid

try {
  fetch(import.meta.env.SUPABASE_FUNCTION_URL, {
    method: "POST",
    headers: {
      Authorization: "Bearer bad-token",
      "Content-Type": "application/json",
    },
  })
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    // most errors would be caught here, for example a deliberately thrown error response
    // from within the application
    console.log(error);
  });
} catch (error) {
  // the 401 response which is sent before the function has even been run does not have 
  // CORS headers, so it doesn't even hit our catch on the fetch
  console.log(error);
}

This was previously fixed, but seems to have regressed.

[KevinBrolly]

Hey @acurrieclark - in the last year we have made lots of changes around Edge Functions, are you still seeing this issue now?

Since it has been so long and we are not seeing other/wider reports of the issue I will close it as stale. However, if you are still experiencing this issue let us know and we can open it up again no problem.