Debugging Appwrite CORS Errors!

Welcome! So if you’re here it looks like you’re facing a stubborn CORS bug. Good news, although my error ended up being a niche issue, the debugging steps I used will help with most Appwrite CORs errors.

So I was trying to set up the recovery password process for my website that uses Appwrite. Specifically I was setting up account.createRecovery(). But I kept getting this persistent CORS error: Cross-Origin Request Blocked

Debugging Step 1: check for typos

I thought, maybe there’s a typo or somethings undefined.

So I console logged

• All 3 environmental variables (yours will likely be process.env)

• data from the form

But nope, everything was fine on that front.

Debugging Step 2: checking if the hostname was set up as a Appwrite platform

Essentially this error is saying there is a mismatch between

1. the “origin” host where the request came from and (ex: dogs.com)

2. the domain of the server, where the request is coming from (ex: cats.com)

So in the case of Appwrite, you need to tell Appwrite what strangers (domains) its allowed to talk to it. You might not have your hostname (ex: www.chewy.com) setup as a platform on Appwrite. Localhost should work by default but if you’re having this issue when using your actual domain, then this is worth a shot:

1. go to your project

2. click overview

3. click on integrations and add platform if you see none there

I was using local host but I tried every version of localhost and my actual domain I could think of, but no dice 😔

Debugging Step 3: Is the right type of request being sent?

I’m using Next.js and I wrote it out as a server function. I double checked that

1. account.createRecovery() is a post request (checked the docs, yes it is)

   https://appwrite.io/docs/references/cloud/client-web/account#createRecovery

2. Next.js server functions can only send a post request

They both use post requests, so the error isn’t related to it being a server function

Debugging Step 4: Using a different browser, since they sometimes give slightly different error messages

With the normal suspects declared innocent I tried the chrome browser to see if there were any more hints

But funnily enough it worked on chrome with no issues! But alas, the issue persisted on firefox

Debugging Step 5: see if an extension is the reason you’re slowly losing your sanity

Since it worked on chrome, I figured it might be an extension issue.

You can either turn off the extensions or use a private window

Alas, Firefox still refused to work 🙄! So it wasn’t the fault of any extensions.

Debugging Step 6: Cast your suspicions on the imports

So I looked toward the imports

Normally you’ll import {Client, Account} from “appwrite” but because I’m using next-js 15 I was instead importing from node-appwrite

node-appwrite is a newer feature they rolled out, so of curiosity I changed it to the normal version:

import { Client, Account } from "node-appwrite" 
// Changed to: 
import { Client, Account } from "appwrite"

And go figure, now it works on Firefox!

Debugging Step 7: Thinking of alternative solutions

node-appwrite is supposed to just be on the server side, so what if firefox for some reason didn't see that files supposed to be a server function? 🤔 So I added node-appwrite back and added use server to the top

"use server";

import { Client, Account } from "node-appwrite";

and it worked! So all this time I just needed to add "use server" to the top 🤦‍♀️

Best of luck debugging your CORS issue and I hope seeing my debugging process helped you conquer your error too!

"use server";

import { Client, Account } from "node-appwrite";
import conf from "../config/envConfig";

//https://appwrite.io/docs/references/cloud/client-web/account

export async function createRecoveryPassword(currentState, formData) {
  try {
    const client = new Client()
      .setEndpoint(conf.appwriteUrl) //api endpoint url
      .setProject(conf.projectId); // Your project ID

    console.log(conf.appwriteUrl);
    //https://cloud.appwrite.io/v1
    console.log(conf.projectId);
    //671111111111111c

    //since react 19 useActionState sends data from forms as a formdata object
    let objectFromForm = Object.fromEntries(formData);
    let emailString = Object.values(objectFromForm)[0];

    const account = new Account(client);

    console.log(emailString);
    //[e-mail]
    console.log(conf.baseFetchUrl);
    //http://localhost:3000

    const result = await account.createRecovery(
      emailString, //email
      conf.baseFetchUrl, //url
    );
    console.log(result); // Success
    return result;
  } catch (error) {
    console.log(error); // Failure
    return error;
  }
}