Netlify Fetch Function Works Locally, Returns 502 Error Deployed

Support
, ,
1

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', // 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:

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.

2

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

1 Like