Appwrite in next js deploy in appwrite

I created API keys to accessd database in API features in next js hence it is a server side. Now when I am creating document from localhost of my project, it success to create however, when I deploy it to the vercel, my project becomes in production mode then I am going to create a document, it gives me a failed

Hey there 👋 A bit concerned about your solution and problem you are facing 🤔
Seems like you are using API key to communicate with Appwrite, which is perfectly fine to do in server-to-server communication. Buut you also mention CORS error, which only happens between client-to-server communication (inside browser).
Soo I would love if you could check your integration and make sure that piece of code that uses API key does NOT run on the client. Also ensure API key itself is stored as enironment variable and is not exposed to the static code that gets to the client (browser).

With that said, CORS errors happens when server (Appwrite) refuses to accept an incomming request. This check is done by browsers automatically and is there as a very important internet protection.
Appwrite automatically allows any requests from localhost, but as soon as any other domain is involved, Appwrite refuses by default. We do this to make sure developers using Appwrite can feel confident about security of their apps without knowing every small detail of security concepts.

To solve this problem, you can enter your project in Appwrite Console, and in the dashboard add your domain as web platform. Make sure to only enter hostname, which pretty-much means domain without any path or protociol (like facebook.com)

After adding your domain as web platform the 500 error should be gone on your production 🤞 Please met me know if you are facing any more issues with this