javascriptreactjscorsappwrite

How to fix CORS error on localhost when connecting to a local Appwrite from a local React app?


I'm using the web SDK for Appwrite in a React app:

const client = new Client()
    .setEndpoint(import.meta.env.URL)
    .setProject(import.meta.env.PROJECT_ID)

  const account = new Account(client);

  const promise = account.create(ID.unique(),
    "some@email.com",
    "somepassword");

  promise.then(
    function (response: any) {
      console.log(response);
    },
    function (error: any) {
      console.log(error);
    }
  );

In the Appwrite GUI I have configured a Web App platform with localhost domain. My React app works on localhost.

In the console I get an error:

POST http://localhost:8455/account net::ERR_FAILED 404 (Not Found)
Access to XMLHttpRequest at 'http://localhost:8455/account' from origin 'http://localhost:5173'
has been blocked by CORS policy:
No 'Access-Control-Allow-Origin' header is present on the requested resource.

How to fix that error?


Solution

  • It doesn't look like the URL is correct. Ensure the endpoint includes the /v1 like http://localhost:8455/v1.