Concealing URL in client-side fetch request within Next.js

Question

Concealing URL in client-side fetch request within Next.js

A contact form built in Next.js makes use of the FormSubmit API to send emails upon clicking the submit button. Below is the code for the onSubmit handler:

const handleSubmit = async (e) => {
  e.preventDefault();
  const res = await fetch("https://formsubmit.co/ajax/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b42554c4759614a40484d0f424e4c">[email protected]</a>", {
    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));
};

The issue here is that the fetch request URL

https://formsubmit.co/ajax/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8df6e2fefdcfebe1f9fee7bfdac9fff5fffa8bf6faf8">[email protected]</a>

can be seen on the client side through DevTools when the request is made. I am trying to find a way to hide this URL in Next.js, but have not been successful yet. Is there a solution to address this concern?

javascript next.js fetch-api form-submit

Answer 1

Answer №1

While the original request cannot be hidden from the browser, there is a workaround using an API route to conceal the URL of the external service.

To achieve this, set up an API route (e.g., /api/submit-data) that makes a call to

https://formsubmit.co/ajax/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="453c2a3037052028242c296b2628">[email protected]</a>

, serving as a proxy for the actual service.

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

    try {
        const response = await fetch("https://formsubmit.co/ajax/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8c1d7cdcaf8ddd5d9d1d496dbd7d5">[email protected]</a>", {
            method: "POST",
            headers: req.headers, 
            body: req.body 
        })
        const data = await response.json()
        res.status(200).json(data)
    } catch(e) {
        res.status(500).end(`An error occurred: ${e}`)
    }
}

Instead of directly calling the external service from the client-side, send requests to the newly created API route.

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

Answer 2

While the original request cannot be hidden from the browser, there is a workaround using an API route to conceal the URL of the external service.

To achieve this, set up an API route (e.g., /api/submit-data) that makes a call to

https://formsubmit.co/ajax/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="453c2a3037052028242c296b2628">[email protected]</a>

, serving as a proxy for the actual service.

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

    try {
        const response = await fetch("https://formsubmit.co/ajax/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="b8c1d7cdcaf8ddd5d9d1d496dbd7d5">[email protected]</a>", {
            method: "POST",
            headers: req.headers, 
            body: req.body 
        })
        const data = await response.json()
        res.status(200).json(data)
    } catch(e) {
        res.status(500).end(`An error occurred: ${e}`)
    }
}

Instead of directly calling the external service from the client-side, send requests to the newly created API route.

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

Concealing URL in client-side fetch request within Next.js

Answer №1

Similar questions

Async Autocomplete fails to display options if the label keys do not match the filtering keys

Error encountered: Required closing JSX tag for <CCol> was missing

Guide on using JavaScript to extract and display a random text from a datalist upon clicking with the onclick event

HTML5 Audio using AudioJS may not function reliably when loaded remotely

Attempting to transfer information between components via a shared service

Experiencing challenges with socket io connectivity between my backend and Quasar application. Encountering a 403 Forbidden error while trying to establish a connection with

Saving data in multiple collections using MongoDB and Node.js: A comprehensive guide

Javascript datatables do not allow for setting a default column sort

Oops! SAPUI5 is encountering an issue with reading property '0' of undefined

Retrieve the exact value of a key within a string

Why is my database being accessed by my Prisma unit tests?

Utilizing JavaScript to retrieve data from a self-submitting form

Sort columns in a MUI datatable

Effectively accessing the Templater object within a user script for an Obsidian QuickAdd plugin

Tips for using multiple Angular directive modules in PprodWant to enhance your Pprod experience by

Navigate through the Jquery slider by continuously scrolling to the right or simply clicking

There seems to be a syntax error in the AngularJS/Bootstrap code, with an unrecognized expression

Oops! An error occurred: fs.readFileSync is not a valid function to perform the Basic

Can anyone suggest methods for displaying query data from a JSON file using HTML?

Is there a way to achieve horizontal alignment for the Twitter and Facebook buttons on my page?