# Netlify Fetch Function Works Locally, Returns 502 Error Deployed

**URL:** <https://answers.netlify.com/t/netlify-fetch-function-works-locally-returns-502-error-deployed/79790>\
**Category:** Support\
**Tags:** deployment, lambda-functions, netlify-newbie\
**Created:** [November 23, 2022, 7:13am UTC](https://answers.netlify.com/t/netlify-fetch-function-works-locally-returns-502-error-deployed/79790 "2022-11-23T07:13:26Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jacobus91](https://avatars.discourse-cdn.com/v4/letter/j/a3d4f5/32.png) [@jacobus91](https://answers.netlify.com/u/jacobus91)\
**Post date:** [November 23, 2022, 7:13am UTC](https://answers.netlify.com/t/netlify-fetch-function-works-locally-returns-502-error-deployed/79790/1 "2022-11-23T07:13:26Z")

</div>

Site Name: jacobs-vanillajs-weather-app.netlify.app

I’m developing a weather Web app that fetches data from OpenWeatherMap via Netlify Functions. The first Function I built works perfectly when I test it with `netlify dev` (no build errors), but when I try to call the function on the deployed site, I get a 502 bad gateway error.

Here’s the client-side JavaScript that calls the Netlify Function:

```auto
let localityQuery = 'Los Angeles';
fetch('/.netlify/functions/get_localities', {
    method: 'POST', // Not actually altering anything, but passing a body parameter fails with GET
    headers: {
        'Content-Type': 'application/json'
    },
    body: JSON.stringify({
        query: localityQuery
    })
})
.then(rawData => rawData.json())
.then(data => {
    console.log(data);
})
.catch((error) => console.error(error));

```

And here’s the Netlify Function:

```auto
import fetch from 'node-fetch';
const API_KEY = process.env.WEATHER_API_KEY;

export async function handler(event) {
	try {
		const eventBody = JSON.parse(event.body);
		const query = eventBody.query;

		const response = await fetch(`https://pro.openweathermap.org/geo/1.0/direct?q=${query}&limit=5&appid=${API_KEY}`, {
			headers: {Accept: 'application/json'}
		});
		if(!response.ok) {
			return {statusCode: response.status, body: `Weather fetch error: ${response.statusText}`};
		}

		const data = await response.json();
		return {
			statusCode: 200,
			body: JSON.stringify(data)
		};
	}
	catch (error) {
		console.error(error);
		return {
			statusCode: 500,
			body: JSON.stringify({ message: `Handler function error: ${error.message}` })
		};
	}
}

```

Any help on this would be greatly appreciated! Thanks so much!

P.S. I double checked and made sure that my environment variable was correct on both the local and deployed versions.

---

<div class="post-metadata">

**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\
**Post date:** [November 27, 2022, 1:30pm UTC](https://answers.netlify.com/t/netlify-fetch-function-works-locally-returns-502-error-deployed/79790/2 "2022-11-27T13:30:41Z")

</div>

Same problem as (no solution yet, just cross-linking to streamline resolution):

> [@Netlify Fetch Function Works Locally, Returns 502 Error Deployed](https://answers.netlify.com/t/79790):
>
> Site Name: jacobs-vanillajs-weather-app.netlify.app I’m developing a weather Web app that fetches data from OpenWeatherMap via Netlify Functions. The first Function I built works perfectly when I test it with netlify dev (no build errors), but when I try to call the function on the deployed site, I get a 502 bad gateway error. Here’s the client-side JavaScript that calls the Netlify Function: let localityQuery = 'Los Angeles'; fetch('/.netlify/functions/get\_localities', { method: 'POST', …

---

<div class="post-metadata">

**Author:** ![hrishikesh](https://sea1.discourse-cdn.com/netlify/user_avatar/answers.netlify.com/hrishikesh/32/74607_2.png) [@hrishikesh](https://answers.netlify.com/u/hrishikesh)\
**Post date:** [November 27, 2022, 1:30pm UTC](https://answers.netlify.com/t/netlify-fetch-function-works-locally-returns-502-error-deployed/79790/3 "2022-11-27T13:30:44Z")

</div>