
Is your Appwrite running on localhost?

No it's on domain.com
. This is my development environment.

For my production environment this is what I see.

What's the URL you're connecting to?

The custom domain I set up for the project.

And would you please check the show filtered cookies?

What's the path?

The cookies with the yellow background says something like it was blocked because the request URL's domain doesn't exactly match the cookie's domain nor was the request URL's domain, a subdomain of the cookie's domain.
My domains are as follows:
Appwrite: domain.dev
NextJS App: anotherdomain.com
Custom Domain: appwrite.anotherdomain.com

My NextJS app uses the custom domain (appwrite.anotherdomain.com
) for all requests involving Appwrite. It doesn't use the main Appwrite domain.

In the screenshot's domain column, it shows .appwrite.anotherdomain.com
as the value (notice the period at the start). I'm guessing it's why it says it doesn't exactly match? Because it seems to be the exact (sub) domain other than the period at the start.

The request URL is https://anotherdomain.com/_next/image?url=https%3A%2F%2Fappwrite.anotherdomain.com%2Fv1%2Fstorage%2Fbuckets%2F64e147551c3f9c7d50f5%2Ffiles%2F64e6bab47f911b0afc35%2Fpreview%3Fproject%3D64b7ee06f16bc1cd9c8d&w=384&q=75
.

That's weird...why is it requested like that?

I'm using NextJS's Image component imported from next/image
.

import Image from 'next/image';
...
<Image
src={file.previewImage.href}
width={300}
height={300}
className='max-w-full max-h-full'
alt=''
/>

Seems like the request might be proxied through your backend which could explain why the cookie isn't passed

So it's blocked... this is usually because of 3rd party cookies

I'm not using my NextJS's backend for this.
const bucketFile = await storage.createFile(Constants.APPWRITE_BUCKET_ID, ID.unique(), file);
const previewImage = await storage.getFilePreview(Constants.APPWRITE_BUCKET_ID, bucketFile.$id);
This is using the web sdk not the server-side.

No, the period is fine. It's part of the old rfc specs for cookies

I already allowed all cookies on my browser though?

But the network request for the image is going through nextjs: https://discord.com/channels/564160730845151244/1142978905058328726/1144093970683678810

I guess I should try a regular <img />
tag instead of using NextJS's Image component.

Worth a try ya

Surprisingly this did fix the issue on both my production instance AND on my localhost - and that's even after I changed my cookie settings to block third party cookies in incognito - I was only expecting that production will be fixed and I'll still have issues on my localhost. Does that mean that images will fail to load if my users don't allow all cookies? Let's say for example my user goes to my app using the incognito mode. No images (from appwrite buckets) are going to display properly?

In production, you should have appwrite on a subdomain of your app. In that case, the cookie is a 1st party cookie and shouldn't be blocked

Yes that is the case so it should be fine.
Recommended threads
- Stuck in "deleting"
my parent element have relationship that doesnt exist and its stuck in "deleting", i cant delete it gives me error: Collection with the requested ID could not b...
- Help with 409 Error on Relationship Setu...
I ran into a 409 document_already_exists issue. with AppWrite so I tried to debug. Here's what I've set up: Collection A has 3 attributes and a two-way 1-to-m...
- Database Double Requesting Error.
I am getting error for creating new document in an collection with new ID.unique() then too getting error of existing document. When button is pressed one docum...
