[Solved]: Problem with Access-Control-Allow-Origin

I have a script-min.js file in my Next.js app,, which does some data fetching from appwrite and renders some element with that. That script is hosted on: somthing.vercel.app/script-min.js

Here is the fetch function in that:

TypeScript

const t = await fetch(
        `https://cloud.appwrite.io/v1/databases/*****/collections/*****/documents?queries[0]=equal("user_id", ["${this.userCode}"])&queries[1]=equal("is_active", [true])`,
        {
          method: "GET",
          headers: {
            "X-Appwrite-Project": "*******",
            "Content-Type": "application/json",
          },
        }
      );

For my use case, I want to add two script that will allow rendering some dom element in any website from any origin. If my add the following script in a app which is running on my localhost:**** it works perfectly,

TypeScript

 <script src="https://something.vercel.app/script-min.js"></script>
    <script>
      Popwola.init("***********");
    </script>

(note: script-min.js have Popwola class) but it doesn't work if I add that script in a html file and double click to open it, it doesn't fetch and logs the error in the screenshot.

What can I do if I want to allow access from any origin?

TL;DR

The user had an issue with the Access-Control-Allow-Origin. They wanted to allow access from any origin but were only able to allow access from specific origins like *.vercel.app. The suggested solution was to add a web platform with the full static host domain if uploading to platforms like GitHub pages or Netlify. Another suggestion was to use a server to access the file. It was also noted that running the script from a local HTML file may not work, but adding it to a website running on localhost:port should work. There was no specific solution provided for allowing access from any origin.

Have you added your something.vercel.app as a web platform in the console?

https://appwrite.io/docs/getting-started-for-web#addPlatform

yes,, I've added this:

In your attached photo it seems like you're running it from a local html file?

yes, it is

Mmm, So then no host can be send like that, and it will better to use some server to access this file thorugh a server.

it works perfectly if I run it on loachost:port ,, have to check if it works in like github pages/netlify etc.. let me check

Yes, as localhost:port is a server and any request from localhost set as the host are okay.

And if you're uploading it to something like github pages/netlify - static host. Then make sure to add a web platform with your full static host domain.

ummm,, I checked,, it only works on *.vercel.app,, but for my use case I want to allow from any origin, what can I do for that?

can I just add a * in my console for hostname?

Yes

It worked. Thanks!

<:appwriteupvote:899677724615016528>

[Solved]: Problem with Access-Control-Allow-Origin