404 - Failed to load resource error on fetch requests to an API

Support
, ,
1

My Live Site: Track Your Calories
My Git repo: GitHub - chayansurana3/FITIFY-Fitness-Tracker

I am working on a Calorie Tracker page where I fetch nutritional information using the Edamam API. I have encountered an issue with the 404 resource not found error when trying to access the nutrition.js function file stored in .netlify/functions path of my source git repo.

Here’s an overview of my setup:

  1. Frontend: I have a frontend script that handles user input and makes a fetch request to the backend for retrieving nutritional data. This is the fetch request : fetch('/.netlify/functions/nutrition?meal=' + meal).

  2. Backend: I have a Netlify Function (nutrition.js) that acts as the server-side code. It performs an API call to the Edamam API using the provided meal parameter.

The Problem: When I click on the track button to fetch the nutritional data, I receive this error : Failed to load resource: the server responded with a status of 404 () (in the console). Upon inspection, I noticed that the problem is in the fetch request which is trying to access the nutrition.js file relative to the live website URL. For Example: https://main--fitify-fitness-tracker.netlify.app/.netlify/functions/nutrition.js?meal=1%20%20Bread

My Attempted Solution: To fix this issue, I tried using the absolute Git path for the nutrition.js file, but it still didn’t resolve the problem.

As a beginner I am clueless on how to solve this issue . Please provide me with some fix for this issue

2
  1. Remove .netlify, node_modules and public folder from your git repo.
  2. Put the function file in netlify/functions and not .netlify/functions.
3

I did as you say. This is the error produced: Failed to load resource: the server responded with a status of 404 () netlify/functions/nutrition?meal=1%20%20Bhindi:1

4

I said put the function file in that folder, not change the URL. The URL still needs to be /.netlify....

5

It worked. Thanks !!