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
- Issue with relations on database
I'm creating a food ordering website for businesses. I'm having issues with the relations on my database I attached the attributes for the collections I'm hav...
- The current user is not authorized to pe...
I want to create a document associated with user after log in with OAuth. The user were logged in, but Appwrite said user is unauthorized. User is logged in wi...
- self-hosted auth: /v1/account 404 on saf...
Project created in React/Next.js, Appwrite version 1.6.0. Authentication works in all browsers except Safari (ios), where an attempt to connect to {endpoint}/v1...