Search code examples
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(),
    "[email protected]",
    "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.

  • The endpoint name and project name match data from Appwrite dashboard.
  • App is started on http, the API is also set up on http.
  • I've indicated localhost as a place where the API calls will come from
  • The app is under http://localhost:5173/ and API on http://localhost:8455.

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.