WebStorageCloud

:rotating_light: CORS Error After Deployment | File Upload Failing in Production

Jun 21, 2025, 08:02

View on Discord

Votes

Replies

Participants

Unknown

Messages

Muhamed Shabeer OPOriginal post

Flutter Developer

Jun 21, 2025, 07:16

Hi team,
I'm facing an issue after deploying my React app to production.

Issue:
When trying to upload a file to Appwrite storage from the production domain https://pro26.in, I'm getting the following CORS error:

Access to fetch at 'https://appwrite.pro26.in/v1/storage/buckets/form_uploads/files'
from origin 'https://pro26.in' has been blocked by CORS policy:
The 'Access-Control-Allow-Origin' header has a value 'https://localhost'
that is not equal to the supplied origin.

Browser Console Log:
POST https://appwrite.pro26.in/v1/storage/buckets/form_uploads/files net::ERR_FAILED 403 (Forbidden)
Error uploading photo: TypeError: Failed to fetch
Error submitting form: Error: Failed to upload photo. Please try again.

What I’ve done so far:

In Appwrite Cloud, I added https://pro26.in to the project's platforms section (under Web).
Everything works perfectly on localhost, but fails after deployment.

Questions:

Do I need to configure CORS anywhere else besides the platform settings?
Is it possible that Appwrite is still treating requests as coming from localhost?
How can I fix the Access-Control-Allow-Origin mismatch issue for my production domain?

Any guidance would be appreciated. Thanks in advance!

Summary

Developers are experiencing a CORS error after deployment and file uploads are failing in production. They are advised to set environment variables in the hosting provider instead of using env files. The issue seems to be with file uploads only, and the suggested solution is to change the endpoint to `.setEndpoint("https://appwrite.pro26.in/v1")` to address the CORS error.

Muhamed Shabeer OP

Flutter Developer

Jun 21, 2025, 07:19

import { Client, Account, Databases, Storage, ID } from 'appwrite';

export const client = new Client();

client
    .setEndpoint("https://appwrite.pro26.in")
    .setProject(import.meta.env.VITE_APPWRITE_PROJECT_ID);

export const account = new Account(client);
export const databases = new Databases(client);
export const storage = new Storage(client);
export { ID } from 'appwrite';

// Helper functions for file operations
export const uploadFile = async (file: File, bucketId: string) => {
    return await storage.createFile(bucketId, ID.unique(), file);
};

export const getFileURL = (bucketId: string, fileId: string) => {
    const file = storage.getFile(bucketId, fileId);
    file.then(file => console.log(file));
    return file.then(file => file.$id).toString();
};

Muhamed Shabeer OP

Rank 1: Thread

Jun 21, 2025, 10:00

here is what i get

Chirag Aggarwal

Jun 21, 2025, 16:41

i see https being used with localhost which is obviously not correct 👀

Muhamed Shabeer OP

Rank 1: Thread

Jun 21, 2025, 16:42

I haven't used localhost anywhere. It's a published site https://pro26.in/form

Chirag Aggarwal

Jun 21, 2025, 16:48

did you add pro26.in to your appwrite console as web platform?

Muhamed Shabeer OP

Rank 1: Thread

Jun 21, 2025, 16:49

Yes

Chirag Aggarwal

Jun 21, 2025, 16:49

something like this

Muhamed Shabeer OP

Rank 1: Thread

Jun 21, 2025, 16:49

Steven

Admin

Jun 21, 2025, 17:00

It's pretty much always one of these: https://appwrite.io/blog/post/cors-error

Muhamed Shabeer OP

Rank 1: Thread

Jun 21, 2025, 17:01

It's only showing the error when uploading files only

Steven

Admin

Jun 21, 2025, 17:03

please share the request headers for the failing request

Muhamed Shabeer OP

Rank 1: Thread

Jun 21, 2025, 17:04

export const uploadFile = async (file: File, bucketId: string) => {
    return await storage.createFile(bucketId, ID.unique(), file);
};

Muhamed Shabeer OP

Rank 1: Thread

Jun 21, 2025, 17:04

// Upload photo with error handling
            if (photoFile) {
                try {
                    const photo = await uploadFile(photoFile, bucketId);
                    photoURL = getFileID(bucketId, photo.$id);
                } catch (error) {
                    console.error('Error uploading photo:', error);
                    throw new Error('Failed to upload photo. Please try again.');
                }
            }

Muhamed Shabeer OP

Rank 1: Thread

Jun 21, 2025, 17:12

I'm using appwrite as library

Steven

Admin

Jun 21, 2025, 17:40

I meant from your browser's network logs

Muhamed Shabeer OP

Rank 1: Thread

Jun 21, 2025, 17:45

Steven

Admin

Jun 21, 2025, 17:46

Request headers please

Muhamed Shabeer OP

Rank 1: Thread

Jun 21, 2025, 17:47

Steven

Admin

Jun 21, 2025, 17:50

Look at the x-appwrite-project header

Muhamed Shabeer OP

Rank 1: Thread

Jun 21, 2025, 17:55

client
    .setEndpoint("https://appwrite.pro26.in/v1") // Your Appwrite endpoint
    .setProject(import.meta.env.VITE_APPWRITE_PROJECT_ID);

env

VITE_APPWRITE_PROJECT_ID = pro26

Steven

Admin

Jun 21, 2025, 17:56

env files are not used in hosting providers

Muhamed Shabeer OP

Rank 1: Thread

Jun 21, 2025, 17:57

Muhamed Shabeer OP

Rank 1: Thread

Jun 21, 2025, 18:00

so instead of env i have to use the values inside it hard coded

Steven

Admin

Jun 21, 2025, 18:01

No look up how to set environment variables in your hosting provider

Join the discussion

Reply to this thread by joining our Discord.

Reply on Discord

Need support?_

Join Discord Get premium support