在 Next.js 的客户端获取请求中隐藏 URL

Question

I have a simple contact form in Next.js that sends an email by using the FormSubmit api when the submit button is clicked: The code for the onSubmit handler is as follows:

const handleSubmit = async (e) => {
  e.preventDefault();
  const res = await fetch("https://formsubmit.co/ajax/your@email.com", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Accept: "application/json",
    },
    body: JSON.stringify({
      name: "FormSubmit",
      message: "I'm from Devro LABS",
    }),
  })
    .then((response) => response.json())
    .then((data) => console.log(data))
    .catch((error) => console.log(error));
};

I want to hide the fetch request URL ie, https://formsubmit.co/ajax/your@email.com on the client side, which is visible from the DevTools when the fetch request is made. I can't figure out how to do so in Next.js. Is there a way to do it?

Answer 1

While you can't hide the request made from the browser, you can use an API route to mask the URL of the external service.

Create an API route (let's say /api/form-submit ) which calls https://formsubmit.co/ajax/your@email.com , and will act as a proxy.

// /pages/api/form-submit
export default function handler(req, res) {
    if (req.method !== "POST") {
        res.setHeader('Allow', ["POST"])
        return res.status(405).end(`Method ${req.method} Not Allowed`)
    }

    try {
        const res = await fetch("https://formsubmit.co/ajax/your@email.com", {
            method: "POST",
            headers: req.headers, // Headers passed from the client-side
            body: req.body // Body passed from the client-side
        })
        const data = await res.json()
        res.status(200).json(data)
    } catch(e) {
        res.status(500).end(`An error occurred: ${e}`)
    }
}

Then from the client-side, make a request against the newly created API route instead.

const handleSubmit = async (e) => {
    e.preventDefault();
    await fetch("/api/form-submit", {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                Accept: "application/json"
            },
            body: JSON.stringify({
                name: "FormSubmit",
                message: "I'm from Devro LABS"
            })
        })
        .then((response) => response.json())
        .then((data) => console.log(data))
        .catch((error) => console.log(error));
};