Access to resource has been blocked by CORS policy

So I want to do this:
curl -X POST 'https://my_link.supabase.co/rest/v1/rpc/my_function' \
-d '{ "param1": "value", "param2": "value" }' \
-H "Content-Type: application/json" \
-H "apikey: SUPABASE_KEY" \
-H "Authorization: Bearer SUPABASE_KEY"


But using senbeacon from javascript. I want to do this so by combining this with
window.addEventListener("unload")
I can sync the user's shopping cart when the page gets closed. I am not certain that this is the best way to acheve this howver. Nonetheless, this the best I could do:
function invokeFunction() {
    const url = 'https://my_link.supabase.co/rest/v1/rpc/my_function'
    const supabaseKey = 'my_key'

    const customHeaders = {
      type: 'application/json',
      apikey: `${supabaseKey}`,
      Authorization: `Bearer ${supabaseKey}`,
    };

    const body = {
      param1: value1,
      param2: value2
    };
    const blob = new Blob([JSON.stringify(body)], headers)

    navigator.sendBeacon(url, blob)
  }


I get the following error:
Access to resource at 'https://my_link.supabase.co/rest/v1/rpc/my_function' from origin 'my_hosted_url' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'.
Was this page helpful?