Tengo un formulario de contacto simple en Next.js que envía un correo electrónico mediante la API FormSubmit cuando se hace clic en el botón Enviar: El código para el controlador onSubmit es el siguiente:
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)); }; Quiero ocultar la URL de la solicitud de recuperación, es decir, https://formsubmit.co/ajax/your@email.com en el lado del cliente, que es visible desde DevTools cuando se realiza la solicitud de recuperación. No puedo averiguar cómo hacerlo en Next.js. ¿Hay una manera de hacerlo?
Si bien no puede ocultar la solicitud realizada desde el navegador, puede usar una ruta API para enmascarar la URL del servicio externo.
Cree una ruta API (digamos /api/form-submit ) que llama a https://formsubmit.co/ajax/your@email.com y actuará como un 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}`) } }Luego, desde el lado del cliente, haga una solicitud contra la ruta API recién creada.
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)); };