Client side 404 error while fetching Vercel serverless function

Question

I have created a static website with html, tailwindcss, and vanilla javascript. I am trying to create a simple POST request on the client side to the server-less function from Vercel. I deployed this on Vercel.

I keep getting a 404 not found error every time I fire the client side api. It never goes to the server-less side. I followed Vercel documentation by housing the server-less function inside an api folder.

Client-Side /dist/index.js

async function handleForm() {
  let name = encodeInput(document.getElementById("floating_name").value);
  let email = encodeInput(document.getElementById("floating_email").value);
  let budget = encodeInput(document.getElementById("floating_budget").value);
  let description = encodeInput(document.getElementById("floating_description").value);

  try {
    const formData = { name, email, budget, description };
    console.log("formData", formData)
    const response = await fetch("/api/form", {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(formData),
    });

    const data = await response.text();
    console.log("data", data);

  } catch (error) {
    console.error('Error:', error);
  }

My server-less function /api/form

module.exports = async (req, res) => {
  try {
    const formData = req.body;
    console.log("Received form data:", formData);

    res.status(200).json({ success: true });
  } catch (error) {
    console.error('Error processing the request:', error.message);

    // Set an error status code and send an error response
    res.status(500).json({ error: 'Internal Server Error' });
  }
};

Shahzaib Afzaal Muhammadi · Accepted Answer · 2024-01-08 22:57:18Z

0

It seems like the issue might be related to the path you are using in your fetch function on the client side. When deploying to Vercel, the serverless functions inside the api folder are automatically mapped to the /api path.

So, in your client-side code, you should adjust the fetch URL to match the correct path for your serverless function. Update this part of your client-side code:

const response = await fetch("/api/form", {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(formData),
});

to:

const response = await fetch("/api/form", {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(formData),
});

Ensure that the path /api/form matches the structure you have in your project. If you are still encountering issues, you might want to check the network tab in your browser's developer tools to see the exact request being made and the response received. This can provide additional insights into what might be going wrong.

answered Jan 8, 2024 at 22:57

Shahzaib Afzaal Muhammadi

12 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

pt2t Over a year ago

looks like your solution is exactly the same as mine. The path was exactly the same.

Collectives™ on Stack Overflow

Client side 404 error while fetching Vercel serverless function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related