Web

How to successfully run AppWrite with CDN in simple HTML file

Dec 27, 2023, 21:40

View on Discord

Votes

Replies

Participants

Unknown

Messages

Mr.AstatineOriginal post

Rank 1: Thread

Apr 3, 2023, 08:54

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: ```
AppWrite Test

const { Client, Account, ID } = Appwrite;
const client = new Client();

  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>

Summary

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.

safwan

Apr 3, 2023, 09:18

Init your client like this

JavaScript

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

Mr.Astatine

Rank 1: Thread

Apr 3, 2023, 09:28

now it gives me this error:

Plain text

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

Mr.Astatine

Rank 1: Thread

Apr 3, 2023, 09:29

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"}

Mr.Astatine

Rank 1: Thread

Apr 3, 2023, 09:31

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

Moderator

Apr 3, 2023, 09:40

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?

Moderator

Apr 3, 2023, 09:40

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

Mr.Astatine

Rank 1: Thread

Apr 3, 2023, 09:47

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

Mr.Astatine

Rank 1: Thread

Apr 3, 2023, 09:48

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
  }
);```

Mr.Astatine

Rank 1: Thread

Apr 3, 2023, 09:49

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>

safwan

Apr 3, 2023, 10:04

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

safwan

Apr 3, 2023, 10:05

nah nvm

safwan

Apr 3, 2023, 10:05

that can't be the issue

safwan

Apr 3, 2023, 10:08

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

safwan

Apr 3, 2023, 10:08

and show any errors it logs

Moderator

Apr 3, 2023, 10:23

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

Moderator

Apr 3, 2023, 10:23

Then you could try using another CDN

Moderator

Apr 3, 2023, 10:24

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

Mr.Astatine

Rank 1: Thread

Apr 3, 2023, 10:43

I'll just use NodeJs

Mr.Astatine

Rank 1: Thread

Apr 3, 2023, 10:44

Thanks for the help anyways @safwan @D5

Drake

Admin

Apr 3, 2023, 17:55

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

Drake

Admin

Apr 3, 2023, 17:56

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

How to successfully run AppWrite with CDN in simple HTML file

Need support?_