:rotating_light: CORS Error After Deployment | File Upload Failing in Production
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.into 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!
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
export const uploadFile = async (file: File, bucketId: string) => {
return await storage.createFile(bucketId, ID.unique(), file);
};
// 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
client
.setEndpoint("https://appwrite.pro26.in/v1") // Your Appwrite endpoint
.setProject(import.meta.env.VITE_APPWRITE_PROJECT_ID);
env
VITE_APPWRITE_PROJECT_ID = pro26
env files are not used in hosting providers
ok
so instead of env i have to use the values inside it hard coded
No look up how to set environment variables in your hosting provider
