How to successfully run AppWrite with CDN in simple HTML file

Hey Guys! I am just tryed to use AppWrite for the first time and I am getting an error. But I can't figure out the problem. I have installed and set up appwrite as the documentation says but when I use the CDN in an HTML file it given an error: Access to fetch at 'http://localhost/v1/account' from origin 'null' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'http://localhost' that is not equal to the supplied origin. Have the server send the header with a valid value, or, if an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. This happens when I try to run this file: ```<body> <h1>AppWrite Test</h1> <script src="https://cdn.jsdelivr.net/npm/appwrite@10.2.0"></script> <script> const { Client, Account, ID } = Appwrite; const client = new Client();

TypeScript

  client
    .setEndpoint("http://localhost/v1")
    .setProject("642a8fce24cb7b6b4e6e");

  const account = new Account(client);

  // Register User
  account
    .create(ID.unique(), "me@example.com", "password", "Jane Doe")
    .then(
      (response) => {
        console.log(response);
      },
      (error) => {
        console.log(error);
      }
    );
</script>

</body>```

TL;DR

The user is experiencing an error when trying to use AppWrite CDN in an HTML file. The error message states that the request has been blocked by the CORS policy. One suggestion is to use the NodeJS server SDK instead. It is also recommended to check if the CDN is delivering the package after the request is made and try using another CDN. Another potential issue is that the AppWrite functions are being executed inside the `<body>` tag, which may not be correct. Finally, there is an example of how to initialize the client with the correct self signed configuration.

Init your client like this

TypeScript

client
    .setEndpoint("http://localhost/v1")
    .setProject("642a8fce24cb7b6b4e6e")
    .setSelfSigned();

now it gives me this error:

TypeScript

    at index.html:19:10
(anonymous) @ index.html:19```

What's also weird is that when I request : http://192.168.0.148/v1/databases/642a94d7d33bdbe3da88/collections/642a94e038ed5ba89a7b/documents It gives me the response: {"message":"Database not found","code":404,"type":"database_not_found","version":"1.2.1"}

Even though I can see this database in the localhost gui and the ID's aare also correct

Tat means it's working, but a database was not created. The appwrite main dashboard is showing a database or you have not created anyone?

In case you have not created one yet, I suggest adding one in the appwrite dashboard first

I think its a problem with the CDN. I tried this with a nodejs project and it worked fine

TypeScript

This Works

import { Client, Databases, ID } from "appwrite";
const client = new Client();
const databases = new Databases(client);
client.setEndpoint("http://localhost/v1").setProject("642a8fce24cb7b6b4e6e");

const promise = databases.listDocuments("642a94d7d33bdbe3da88", "642a94e038ed5ba89a7b");

promise.then(
  function (response) {
    console.log(response); // Success
  },
  function (error) {
    console.log(error); // Failure
  }
);```

TypeScript

This does not work

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>AppWrite Test</h1>
    <script src="https://cdn.jsdelivr.net/npm/appwrite@10.2.0"></script>
    <script>
      const { Client, Databases, ID } = Appwrite;
      const client = new Client();
      const databases = new Databases(client);
      client
        .setEndpoint("http://localhost/v1")
        .setProject("642a8fce24cb7b6b4e6e");

      const promise = databases.listDocuments(
        "642a94d7d33bdbe3da88",
        "642a94e038ed5ba89a7b"
      );

      promise.then(
        function (response) {
          console.log(response); // Success
        },
        function (error) {
          console.log(error); // Failure
        }
      );
    </script>
  </body>
</html>

wait @Mr.Astatine i don't think you're supposed to do appwrite functions inside the <body>

nah nvm

that can't be the issue

also, can you open the Network tab in your browser and reload the page?

and show any errors it logs

That's technically not an error. That means the request was made successfully, but no database was specified in the URL

Then you could try using another CDN

Or maybe it's because the CDN delivers the package after the request is made

I'll just use NodeJs

Thanks for the help anyways @safwan @D5

This is weird...a browser should always send an Origin header. It's weird that the value is null in your error

The web sdk is meant to be used in a front end client app. The server SDK (node) is meant to be used server-side. It would be dangerous to expose API keys client side

Reply to this thread by joining our Discord

Reply on Discord

Need support?

Join our Discord

Get community support by joining our Discord server.

Join Discord

Get premium support

Join Appwrite Pro and get email support from our team.

Learn more

Recommended threads

Need support?

Join our Discord

Get premium support