Jetro
16 Aug, 2024, 15:09

am trying to follow a Next.js tutorial with Appwrite as the backend, but I am getting a cross-origin error when I try to save data.

This is what I receive in the console

HTTP/2 204 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-Appwrite-Timeout, 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-Appwrite-Session, X-Fallback-Cookies, X-Forwarded-For, X-Forwarded-User-Agent access-control-allow-methods: GET, POST, PUT, PATCH, DELETE access-control-allow-origin: http://localhost:3000 access-control-expose-headers: X-Appwrite-Session, X-Fallback-Cookies content-type: text/html date: Fri, 16 Aug 2024 15:07:49 GMT server: Appwrite x-debug-speed: 0.0015490055084229 content-length: 0 OPTIONS /v1/databases/66be54550000ecb0adca/collections/66be548300167773f11c/documents HTTP/2 Host: cloud.appwrite.io User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:129.0) Gecko/20100101 Firefox/129.0 Accept: / Accept-Language: it-IT,it;q=0.8,en-US;q=0.5,en;q=0.3 Accept-Encoding: gzip, deflate, br, zstd Access-Control-Request-Method: POST Access-Control-Request-Headers: content-type,user-agent,x-appwrite-key,x-appwrite-project,x-appwrite-response-format,x-sdk-language,x-sdk-name,x-sdk-platform,x-sdk-version Referer: http://localhost:3000/ Origin: http://localhost:3000 Connection: keep-alive Sec-Fetch-Dest: empty Sec-Fetch-Mode: cors Sec-Fetch-Site: cross-site Priority: u=4 TE: trailers

I have already set up the platform on Appwrite on localhost.

TL;DR
Developers are encountering a cross-origin error when trying to save data in an Appwrite backend while following a Next.js tutorial. The issue seems to be related to the CORS configuration. Solution: Check and adjust the CORS settings on the platform to allow requests from the Next.js frontend hosted on localhost.
Reply

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