CORS error localhost

This is:

TL;DR

Users are discussing a CORS (Cross-Origin Resource Sharing) error related to localhost in the Appwrite support thread. The issue seems to be caused by Appwrite not recognizing the file opened in the browser as localhost. One user suggests using a local web server (such as npm package 'serve') to resolve the problem. Another user mentions that they don't see the project ID in the request headers, which could be a potential issue. One user shares their code, which uses the Appwrite JavaScript SDK to fetch a document from the database. The user states that they have set the endpoint and project ID correctly. However, they encounter an unexpected

Localhost as web platform:

The Appwrite version is 1.3.7

I will share the code tomorrow, maybe I have committed a mistake, I'm very noob with js for websites 😅

Facing the exact same issue. Flutter web, deployed on prod server, when trying to create an anonymous session the header for some reason is https://localhost, that gets blocked by cors, even though I have changed the appwrite API endpoint to the prod server in the constants file in my project ??? Not sure what I am missing,

Please create a separate post

Full exact logs and looking at the request headers in the network logs from the browser would also be gelpful

That's the error:

TypeScript


An unexpected error ocurred: index.html:39:21
AppwriteException: NetworkError when attempting to fetch resource.
    s sdk.js:82
    call sdk.js:404
    c sdk.js:23
index.html:40:21```

Translation of the first paragraph:

```Request from other origin blocked: the other origins politics prevent reading the remote resource in https://mydomain.com/v1....(reaseon: the CORS header 'Access-Control-Allow_origin' doesn't match with 'https://localhost').

Network logs:

TypeScript

HTTP/2 204 No Content
date: Tue, 29 Aug 2023 18:55:06 GMT
content-type: text/html
access-control-allow-credentials: true
access-control-allow-headers: Origin, Cookie, Set-Cookie, X-Requested-With, Content-Type, Access-Control-Allow-Origin, Access-Control-Request-Headers, Accept, X-Appwrite-Project, X-Appwrite-Key, X-Appwrite-Locale, X-Appwrite-Mode, X-Appwrite-JWT, X-Appwrite-Response-Format, X-SDK-Version, X-SDK-Name, X-SDK-Language, X-SDK-Platform, X-SDK-GraphQL, X-Appwrite-ID, X-Appwrite-Timestamp, Content-Range, Range, Cache-Control, Expires, Pragma, X-Fallback-Cookies
access-control-allow-methods: GET, POST, PUT, PATCH, DELETE
access-control-allow-origin: null
access-control-expose-headers: X-Fallback-Cookies
x-debug-speed: 0.0012748241424561
cf-cache-status: DYNAMIC
report-to: {"endpoints":[{"url":"https:\/\/a.nel.cloudflare.com\/report\/v3?s=K4NdHOU2eY08CJzV3Wew6dWWbEG1Rxb8QIq%2BrAx1zSWRWstgXDOkgQujNtzusu%2F0e6bOuWMAc%2BCY3ASsjloavBMDW86AiHdNyJFuHQfdLLH4SodBTNABQvLHWkRXoJ3Sf9UlUQ%3D%3D"}],"group":"cf-nel","max_age":604800}
nel: {"success_fraction":0,"report_to":"cf-nel","max_age":604800}
server: cloudflare
cf-ray: 7fe701a23859218a-MAD
alt-svc: h3=":443"; ma=86400
X-Firefox-Spdy: h2

TypeScript

OPTIONS /v1/databases/main/collections/location/documents/location/HTTP/2
Host: mudomain.com
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/116.0
Accept: */*
Accept-Language: es-ES,es;q=0.8,en-US;q=0.5,en;q=0.3
Accept-Encoding: gzip, deflate, br
Access-Control-Request-Method: GET
Access-Control-Request-Headers: content-type,x-appwrite-project,x-appwrite-response-format,x-fallback-cookies,x-sdk-language,x-sdk-name,x-sdk-platform,x-sdk-version
Origin: null
DNT: 1
Connection: keep-alive
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site

Hmm that path looks weird...maybe it's just formatting though.

I don't see project id in the request headers 🧐

It's set

this is the code:

TypeScript

<script>
    const { Client, Databases } = Appwrite;

    async function getDocument() {
        try{
        const client = new Client();

        client
        .setEndpoint('https://mydomain.com/v1')
        .setProject('projectID');
        
            const databases = new Databases(client);

            const promise = await databases.getDocument('main', 'location', 'locationobj');
            console.log("done");
            console.log(promise);

        }catch(error){
            console.log("An unexpected error ocurred:")
            console.log(error);
        }
    }
    getDocument();
</script>

I don't have too much Idea about JS , maybe something is wrong there

Fixed the issue. Just add multiple web platforms like "*.example.com" , "example.com" "www.example.com" .. Should work

But you where deploying in localhost or vercel, etc?

Production with request coming from my apps domain name ..

I see. In my case I'm opening the file

In the pc, so it's localhost, I think?

Opening the file? You're not hosting it with a local web server?

Nope, not hosting in any local server, is that the issue?

With firebase that doesn't seem to be an issue 😅

That could be a problem. Try using a web server. Easiest way is to use serve. It's an npm package

Sincerely, first time I'm going to use NPM 😆

Will try this. Seems that will solve the problem definitely

Since what seems to happen is that Appwrite doesn't recognise the file opened in browser as localhost

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