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 i.e., 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?
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));
};