How to Connect a React App to an AWS Lambda Function URL.

I'm building a financial agent on AWS, and for the last few days, my frontend and backend have been living in separate worlds. My Python Lambda function did the work, and my React dashboard just looked pretty with fake data. Today, I connected them.

The Backend Change

First, I had to make sure my Lambda function actually returned data usable by a browser. This meant returning a JSON object with CORS headers.

Python

The critical return statement

return {
'statusCode': 200,
'headers': {
"Access-Control-Allow-Origin": "*", # Allow browser access
"Content-Type": "application/json"
},
'body': json.dumps({
"data": {
"transactions": saved_items,
"ai_analysis": ai_analysis
}
})
}
The Frontend Logic

I used Vite for my React setup. The key was to replace my hardcoded data arrays with a fetch call to the unique Function URL provided by AWS.

JavaScript
useEffect(() => {
const fetchData = async () => {
const response = await fetch("YOUR_LAMBDA_URL_HERE");
const result = await response.json();
setTransactions(result.data.transactions);
};
fetchData();
}, []);

Now, every time the dashboard loads, it triggers a live financial audit in the cloud. No more fake numbers.