Can't figure out how to configure CORS to allow directly file uploads using presigned url.

[sergiotapia]

Access to fetch at 'https://ki123123.supabase.co/object/upload/sign/my-bucket/coin123123123.png?token=123123123' from origin 'http://localhost:4000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I'm generating a presigned url in my backend, and sending that to my frontend.

let Uploaders = {}

Uploaders.S3 = async function (entries, onViewError) {
  for (const entry of entries) {
    const { key, token } = entry.meta;
    const file = entry.file;

    const url = new URL(`https://ki123123.supabase.co/object/upload/sign/${key}`);
    url.searchParams.set('token', token);

    try {
      const body = new FormData();
      body.append('file', file);
      body.append('cacheControl', '3600');

      const headers = {
        'x-upsert': 'false',
      };

      const res = await fetch(url.toString(), {
        method: 'PUT',
        body: body,
        headers,
      });

      const data = await res.json();

      if (res.ok) {
        console.log('File uploaded successfully:', data);
      } else {
        console.error('Upload error:', data);
        if (onViewError) onViewError(data);
      }
    } catch (error) {
      console.error('Unexpected error:', error);
      if (onViewError) onViewError(error);
    }
  }
}

export default Uploaders;

In AWS S3 or Cloudflare R2, I would go into the bucket and tweak the CORS parameters there to allow direct browser uploads. I can't figure out how to do this in Supabase. Any tips?

[algi]

I have exactly same problem and I haven't been able to figure it out either, because I think Supabase simply doesn't support this. I'm using ActionText component in Rails, but basically same issue.

Having a simple UI to add my host name into allowed domains per project would resolve the issue.

[sergiotapia]

What I'm going to end up doing in a bit is just pass the file to my backend server and upload the file from there. What a shame though, I would be passing data around for no reason.

[Hallidayo]

Hi all - just checking in here, Did you find a solution for this issue?

[sergiotapia]

Unfortunately no - we are still having to send the file to the backend, base64 it, then presign and upload from there.

[Hallidayo]

Hi, I've moved this issue over from the supabase repo to the storage-js repo as its more related.