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

Examining the version of a node module installed in the local environment and comparing it

What is the best method for transferring properties to the parent component using Vue router?

JavaScript: selecting multiple elements with identical attributes

Prisma query that selects categories only if they are linked to an item in a table relation

Guide to utilizing exact matching functionality in ExpressJs router

The jQuery plugin embedded in the Joomla 3.2 module fails to load or function properly

Styling with CSS: A guide to reducing paragraph margins within a div element

Decide on the javascript/jquery libraries you want to include

Error encountered while updating in the midst of an ongoing state transition, e.g. within the `render` method

In Node JS, the variable ID is unable to be accessed outside of the Mongoose

Executing a protractor test on Safari results in the message "Angular was not located on the webpage https://angularjs.org/"

What is the best way to convert a Date into the JSON format before sending it to the database?

Is there a way to retrieve the response body in Express framework?

Govern Your Gateway with Expressive Logs

Cloud Firestore trigger fails to activate Cloud function

"Facing an issue with Google Chrome not refreshing the latest options in an HTML select dropdown list

Retrieving and storing information from a form without the need to submit it

React Weather App experiencing issues with prop communication and updating variables

Revamp the angular design of the mat-tree UI bottom border line issue

JavaScript in Internet Explorer is showing an error message stating that it is unable to access the property '0' of an undefined or null