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

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!

TL;DR

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.

TypeScript

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();
};

here is what i get

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

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

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

Yes

something like this

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

It's only showing the error when uploading files only

please share the request headers for the failing request

TypeScript

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

TypeScript

// 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.');
                }
            }

I'm using appwrite as library

I meant from your browser's network logs

Request headers please

Look at the x-appwrite-project header

TypeScript

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

env

TypeScript

VITE_APPWRITE_PROJECT_ID = pro26

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

Need support?

Join our Discord

Get premium support

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

Recommended threads

Need support?

Join our Discord

Get premium support