shashankdaimaOriginal post
Rank 1: Thread
Hey Appwriters :),
I am new to WebDev, majorily worked in Mobile Industry. So, I have zero knowledge of CORS Errors. I made public cloud function in appwrite using python, wanted to use that in React Project, but for some reasons I am constantly facing CORS error, whereas i can use the function in curl, browser and postman.
This is my source code of appwrite function,
Python
from appwrite.client import Clientimport os
from .notion_api import get_top_news
NOTION_API_KEY = os.environ["NOTION_API_KEY"]
def main(context): return context.res.json( { "notion_top_news": get_top_news(NOTION_API_KEY), } )Whereas I am calling it like this,
TypeScript
export async function fetchTopNews(): Promise<{ notion_top_news: { document_id: string; headline: string; image_url: string; summary: string } }> { const url = 'https://<function-id>.appwrite.global/';
try { const response = await fetch(url);
if (!response.ok) { throw new Error(`Request failed with status: ${response.status}`); }
const data = await response.json();
if (!data.notion_top_news || typeof data.notion_top_news !== 'object') { throw new Error('Invalid JSON format in response'); }
return data as { notion_top_news: { document_id: string; headline: string; image_url: string; summary: string; }; }; } catch (error) { throw new Error(`Failed to fetch data: ${error}`); }}Summary
The user is experiencing a CORS error when trying to call an Appwrite function from localhost in a React project. They have already added a client in the Appwrite dashboard and set localhost as the hostname. They are unsure how to add a custom header in the response.
Solution: To resolve the CORS error, the user needs to return the `Access-Control-Allow-Origin` header in the response from the Appwrite function. They can add the header using the Python sample code provided in the support thread. Additionally, they should make sure that the function is hosted in the cloud and is being called correctly using the correct Appwrite domain.