[SOLVED] Unable to load images when hosted on Vercel

I use Appwrite storage to store some images and generate previews for them. When I develop my React app locally, all works well. However when I deploy it to Vercel, images won't load and I get the 401 unauthorized response from the server.

I've added Vercel deploymnet to my platforms, and otherwise contacting Appwrite works (e.g. to work with the database).

TL;DR

Issue: Unable to load images when hosted on Vercel Solution: The problem is likely caused by third-party cookie restrictions in modern browsers. To resolve this, try the following steps: 1. Give any permissions to the image file to address the issue. 2. Try accessing the website in incognito mode. 3. Log out and back in to the application to see if that resolves the problem. 4. Check if the fallbackCookies are stored in the browser under the localhost but not the deployed website's host. If none of these steps work, it may be necessary to purchase a custom domain to prevent third-party cookie issues.

Update: for some reason, when I logged out and back in to my application, it worked. I suspect has to do something with the fallbackCookies: e.g. they could have been stored in the browser under the localhost but not the deployed website's host...

Update 2: from the mobile device, the workaround of logging out and back in did not work.

You might be running into a 3rd party cookie problem. see https://appwrite.io/docs/custom-domains

Were you able to try in incognito mode once?

<:plusone:775475804431581286>

Can you try giving any permissions to the file and see if that addresses the issue? If it does, it might be a 3rd party cookie problem

Setting the permission of the database to Any solved it. So to prevent the 3rd party cookies issue, the only way is to own a custom domain? Is there any way to resolve this problem without purchasing a domain and without setting the permissions to Any?