Pricing Blog

CORS policy - Access to fetch at 'supabase.co/storage/v1'

  • uunicode-1284793988758376458

    unicodes

    1 year ago

    I have two identical uploads, one is for covers and one is for avatars. Avatars works good the Covers doesn't. The only difference from the two are the bucket name.

    I can not understand why I can not upload in covers. Avatars and Covers has the same Policies.

    How to fix this issue?

    ps: Getting the upload url works, the issue is with the upload.
    1284793989102305321-Screenshot_2024-09-15_at_11.29.49.png
    1284793989391978527-Screenshot_2024-09-15_at_11.31.32.png
  • max.kayr-1284795157295665285

    Max

    1 year ago

    Hi! What is the error message?
  • uunicode-1284795507280973854

    unicodes

    1 year ago

    Access to fetch at 'supabase.co/storage/v1' from origin '"qqqqqqqqq-toddle.site' has been blocked by CORS policy: 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.
  • uunicode-1284796661503361064

    unicodes

    1 year ago

    the policy for insert
    1284796661293649930-Screenshot_2024-09-15_at_11.42.47.png
  • max.kayr-1284803713847791626

    Max

    1 year ago

    A CORS error should not have anything to do with the policy. I am not sure how Supabase handles the CORS config for the storage, but are you 100% sure that you path is correct?
  • uunicode-1284804754375180348

    unicodes

    1 year ago

    For the upload, i checked right now and is the same used in the package "supabase-upload-input". For the url request is the same too.
  • max.kayr-1284808738330382427

    Max

    1 year ago

    What did you do differently on the avatars? Those seem to work
  • uunicode-1284808949346078765

    unicodes

    1 year ago

    Just changing the name from avatars to covers. I tried to make sure the name covers is correct with find and replace 😅 .
  • lucasg-1284943874191523951

    Lucas G

    1 year ago

    Not sure if it changes things but the upload should have 'No auth' selected on the dropdown
  • lucasg-1284944478095802379

    Lucas G

    1 year ago

    It might be trying to pass a token but since the request isn't proxied, it would mess with it if that's case.
  • uunicode-1284944853003665430

    unicodes

    1 year ago

    The get url works, and works ok with access token, no issue
    1284944852823441481-Screenshot_2024-09-15_at_21.31.37.png
  • the issue is with the upload
  • This shows an Auth header
  • As well as it being selected in the dropdown
  • uunicode-1284945246807003197

    unicodes

    1 year ago

    tried with no auth and is the same
  • lucasg-1284945420870750379

    Lucas G

    1 year ago

    The Authorization header would also be dynamic based on the signed url that is sent in the response
  • That one is static
  • If that's not for testing purposes, then also check that
  • lucasg-1284945878498541650

    Lucas G

    1 year ago

    Beyond that, I'm not sure why you'd have CORS issues. It's not an RLS related thing, it's about where the call is originating basically
  • uunicode-1284946152113832068

    unicodes

    1 year ago

    It worked ok yesterday, and after many test of optimisation image, ad some point it refused to continue to upload. without changing something.
  • I was just testing compress rates, and at some poit it refused to continue to upload.
  • lucasg-1284946327070965900

    Lucas G

    1 year ago

    Try updating that auth header
  • uunicode-1284946372184899675

    unicodes

    1 year ago

    Working on it right now
  • I will to it like your from supabase package
    1284946478925877404-Screenshot_2024-09-15_at_21.36.00.png
  • uunicode-1284952630380199956

    unicodes

    1 year ago

    Continue to receive CORS 😅
  • uunicode-1284955957201342576

    unicodes

    1 year ago

    I did a test, and duplicated Avatar naming it cover but with the upload in avatars. It work with no issue.
  • Then changed just the name of the bucket from avatars to covers and CROS.
  • I believe is something in this case with the bucket.
  • changing it back to avatars will work
    1284956308919029911-Screenshot_2024-09-15_at_22.17.05.png
  • lucasg-1285258008200216616

    Lucas G

    1 year ago

    Did you figure out what is causing it
  • uunicode-1285291716919820339

    unicodes

    1 year ago

    No :(.
  • 1285291898571063449-Screenshot_2024-09-16_at_20.28.46.png
    1285291898797559868-Screenshot_2024-09-16_at_20.28.31.png
    1285291899451867206-Screenshot_2024-09-16_at_20.25.02.png
    1285291899065729104-Screenshot_2024-09-16_at_20.25.11.png
  • uunicode-1285292889454284812

    unicodes

    1 year ago

    1285292886614868049-Screenshot_2024-09-16_at_20.31.49.png
    1285292887021719574-Screenshot_2024-09-16_at_20.31.24.png
    1285292887575363625-Screenshot_2024-09-16_at_20.31.40.png
    1285292887982080061-Screenshot_2024-09-16_at_20.32.23.png
    1285292888527343678-Screenshot_2024-09-16_at_20.32.15.png
    1285292888913346571-Screenshot_2024-09-16_at_20.32.10.png
    1285292889244565606-Screenshot_2024-09-16_at_20.32.04.png
    1285292889663868928-Screenshot_2024-09-16_at_20.31.55.png
  • Can you see any issue here? Why avatars is working and covers not? And also the avatars stops working if changing the bucket to covers.
  • I tried to create a new bucket and it is the same, doesn't work. Is there a new limit for buckets in supabase for free plans?
  • lucasg-1285296149045186683

    Lucas G

    1 year ago

    I do not know about bucket limits
  • Though, generally speaking, it is not "best practice" to create multiple buckets but rather to use folders in buckets
  • Side thing, the auth.role() = authenticated part is redundant since it is already stated in the authenticated role above that
  • No need to have autho bearer selected in the dropdown for this call since it is not proxied
  • uunicode-1285309758013968404

    unicodes

    1 year ago

    It is not working if not auth bearer. I tried it and refuse to work. Great Ideea having folders, I will try to change everything and add folders.
  • lucasg-1285311222517862530

    Lucas G

    1 year ago

    The component package has “No Auth” selected for the upload as the Authorization header is already declared
  • You are trying to declare it twice on that call
  • The token used should be the one returned on the signed URL request
  • If it doesn’t work with No Auth selected, then that’s a clue that something is incorrect
  • uunicode-1285317123668836414

    unicodes

    1 year ago

    You are right, it works with No Auth for avatars, the issue is there for covers.
  • lucasg-1285318062274252873

    Lucas G

    1 year ago

    It might still be worth it for you to consider a folder structure
  • Something like bucket/avatars/userId
  • uunicode-1285318515594887300

    unicodes

    1 year ago

    1285318515464736860-Screenshot_2024-09-16_at_22.15.19.png
  • lucasg-1285318583106408544

    Lucas G

    1 year ago

    Or even just bucket/userId. Then you can set up an RLS policy where foldername = userId
  • uunicode-1285318765357305886

    unicodes

    1 year ago

    PUT come after the CORS, but could be here some information that can help with this situation?
  • lucasg-1285318931556597831

    Lucas G

    1 year ago

    You'd have to check the error in the API call itself
  • The response
  • uunicode-1285319456356040855

    unicodes

    1 year ago

    it is empty
    1285319455273914368-Screenshot_2024-09-16_at_22.19.33.png
    1285319456104513589-Screenshot_2024-09-16_at_22.19.23.png
  • 1117897194134052925-@unicodes
    it is empty
    lucasg-1285319610043990170

    Lucas G

    1 year ago

    That seems like a successful response
  • uunicode-1285319805645230245

    unicodes

    1 year ago

    Yes, but the bucket is empty 😦
  • lucasg-1285319813228531773

    Lucas G

    1 year ago

    That response is then taken and used in the upload call
  • uunicode-1285319885433606317

    unicodes

    1 year ago

    I tried also with service_role and no improvement
  • lucasg-1285319888176680964

    Lucas G

    1 year ago

    Oh nvm, the other screenshot hadn't loaded
  • No, you never want to use service_role client side
  • uunicode-1285320019538083943

    unicodes

    1 year ago

    Just for checking if comes from RLS
  • It looks like a supabase limitation
  • do you have a free plan?
  • I would like to ask if you can create a second bucket and try to upload something in the new one.
  • lucasg-1285321414768853053

    Lucas G

    1 year ago

    Yeah, it works no problem
    🙏1
  • uunicode-1285321811613188158

    unicodes

    1 year ago

    Thank you for the confirmation
  • lucasg-1285322135090364436

    Lucas G

    1 year ago

    If you use S3 directly, there is a limit to the number of buckets you can create but I don't think Supabase passes on that limit
  • uunicode-1285323848174272663

    unicodes

    1 year ago

    I need just 3 buckets 🙂 But in this case I want to have some more tries and if not, then I will use folders.
  • lucasg-1285327237825957929

    Lucas G

    1 year ago

    You probably don't need two upload calls btw
  • Since the request one passes all the info the upload call needs
  • You can just have one
  • The bucket name could also be passed dynamically to the request URL call
  • uunicode-1285328619287220265

    unicodes

    1 year ago

    It is build in this way for making it a separate component (when doing this I will just paste the APIs).
  • lucasg-1285329588859175012

    Lucas G

    1 year ago

    You can build the working upload component then reuse it in those other ones
  • And pass in the bucket dynamically
  • uunicode-1285335164762849311

    unicodes

    1 year ago

    I did a POST and it worked in covers.
    1285335164968374283-Screenshot_2024-09-16_at_23.21.10.png
  • uunicode-1285335430950158417

    unicodes

    1 year ago

    Now the issue is more complex. The bucket works and allow uploads, the APIs are right, but CORS is in love with my app and persist.