I am using appwrite as backend for a blog website. In it I am storing images and fetching them using their id to display. However the browser is showing CORS restriction due to which image is not getting loaded on the website.

Below code is how I am using the image

<img
src={appwriteService.getFilePreview(post.featuredImage)}
alt={post.title}
className="rounded-xl"
/>

Below code is the definition of getFilePreview function

getFilePreview(fileId){
 return this.bucket.getFilePreview(
   config.appwriteBucketId,
   fileId
 )
}

I am using appwrite as backend for a blog website. In it I am storing images and fetching them using their id to display. However the browser is showing CORS restriction due to which image is not getting loaded on the website.

Below code is how I am using the image

<img
src={appwriteService.getFilePreview(post.featuredImage)}
alt={post.title}
className="rounded-xl"
/>

Below code is the definition of getFilePreview function

getFilePreview(fileId){
 return this.bucket.getFilePreview(
   config.appwriteBucketId,
   fileId
 )
}

• reactjs
• cors
• web-development-server
• appwrite

1 Answer 1

CORS errors usually happen because the project is missing a web platform that allows the app to connect to it. To add a web platform:

1. Open your project in the Appwrite Console
2. Scroll down to the Integrations section
3. Click the Add platform button
4. Select Web app
5. Enter the hostname for your app

Besides the web platform, other reasons you may get this error are:

1. lack of access due to permissions on the bucket or file
2. incorrect project, bucket, or file id

Reference: https://appwrite.io/blog/post/cors-error