Serverless Function 404

Support
1

My site: https://master--extraordinary-sprite-9b3b15.netlify.app/
for the build on Netlify I used:CI= npm build

Hi , so Ive been trying to deploy my React site correctly using Netlify. Upon first deployment,all the tests were completed on Netlify, and my site was up, but when i clicked on the page that displays images from the Pexel API that Im using, I ran into the CORS error. I tried to fix this by using the "Access Control Allow Origin":"*" in the headers and that didnt work. I got the same error. So then I created a proxy server and with that I got a 404 error back. This is how my proxy.js looks:

const axios = require(“axios”);
const { PEXELS_API_URL } = require(“./constants”);

exports.handler = async (event, context) => {
try {
const { keyword, page } = event.queryStringParameters;
const apiUrl = PEXELS_API_URL(keyword, page);
const API_KEY = process.env.REACT_APP_PEXELS_API_KEY;

const response = await axios.get(apiUrl, {
  headers: {
    Authorization: API_KEY,
  },
});

return {
  statusCode: 200,
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Headers": "Content-Type",
  },
  body: JSON.stringify(response.data),
};

} catch (error) {
console.error(“Error fetching data:”, error);

return {
  statusCode: 500,
  body: JSON.stringify({ error: "Failed to fetch data" }),
};

}
};

And this is how the page that fetches data looks as its making a request to the serverless function:
const fetchData = async (keyword) => {
try {
const res = await axios.get(“/.netlify/functions/proxy”, {
params: {
keyword,
page,
},
});

  setPexelData((prev) => ({
    ...prev,
    photos: [...prev.photos, ...res.data.photos],
  }));
} catch (error) {
  console.error("Error fetching data:", error);
}

};

As stated before the code above gave me a 404 error so I added a _redirects file to configure Netlify to my moodboard directory.

_redirects file:/api/* /moodboard/:splat 200

After doing so the deployment statuses all said completed, and it said my _redirect rule was processed without error, but it also said no header rules were processed and no functions were deployed. This tells me my proxy.js couldn’t have been accessed during deployment. I currently have it located in my public folder in my directory. I’m new to learning about serverless functions and how to debug certain errors. I would greatly appreciate any help given to get my site up and running. Please let me known if anymore info is needed.

2

The proxy.js file from your repo’s root needs to be placed under netlify/functions directory. Try moving it and then push a commit.

4

Okay so I made the netlify/functions directory and placed the proxy.js there and I deployed it Im getting a 502 error code:
Failed to load resource: the server responded with a status of 502 ()

Also when I deploy it says no header rules were processed.
Is there anything wrong with my proxy file? Im not sure why Im receiving an error still. If you need more information please let me know.

this is my proxy.js file:

const axios = require(“axios”);
const { PEXELS_API_URL } = require(“…/…/src/constants”);
require(“dotenv”).config();

exports.handler = async (event, context) => {
try {
const { keyword, page } = event.queryStringParameters;

const response = await axios.get(PEXELS_API_URL(keyword, page), {
  headers: {
    Authorization: process.env.REACT_APP_PEXELS_API_KEY,
  },
});

return {
  statusCode: 200,
  headers: {
    "Access-Control-Allow-Origin": "*",
    "Access-Control-Allow-Headers": "Content-Type",
  },
  body: JSON.stringify(response.data),
};

} catch (error) {
console.error(“Error fetching data:”, error);

return {
  statusCode: 500,
  body: JSON.stringify({ error: "Failed to fetch data" }),
};

}
};

5

I don’t see any proxy.js in your repo now. Did you remove it?