Mautic API works from dev localhost but no response on production deployment

Product Support
1

Your software
My Mautic version is: v4.4.9 (running in Docker container using https://easypanel.io/)
My PHP version is: 7.4.33
My Database type and version is: 10.8.2-MariaDB-1:10.8.2+maria~focal

Your problem
My problem is:

  • I have set up an API call in a Next.js project page. The call is triggered after a user signs up by adding them to the Mautic contacts. See below for the relevant API calls. In summary:

    1. It checks if the user (a “user” variable is available with data) already exists as a contact (checking the email).
    2. If the contact already exists, they are added to a segment.
    3. If the contact does not, the are added as a contact and added to a segment.

  • The API call is made using basic auth. Note: Configuration > API Settings > “API enabled?” and “Enable HTTP basic auth?” are both set to “yes”.

  • Everything works perfectly when I make the API call with Next.js in dev mode from my machine on localhost:3000.

  • When the API call is made on my deployed production Next.js project (i.e., https://domain.com) there is no response at all from Mautic.

These errors are showing in the log: None.

Steps I have tried to fix the problem:

  • Triple checked all .env variables in deployment environment.
  • Cleared Mautic cache.
  • In Configuration > System Settings > CORS Settings, turned Restrict Domains both on and off. When “on”, have added my domain (and variations of it) to the “Valid Domains” field. Have cleared cache between changing settings.
  • Reinstalled Mautic.
  • Deployed Next.js to Vercel and deployed on my own node server.

Here are my API calls (snipped from the surrounding code):

  // add the user to mautic subscribers
        // https://www.npmjs.com/package/mautic-api
        const baseURL = `${process.env.MAUTIC_BASEURL}`;

        // Check if the user is a contact
        fetch(`${baseURL}/api/contacts?search=${user.email}`, {
          method: "GET",
          headers: {
            "Content-Type": "application/json",
            "X-Requested-With": "XMLHttpRequest",
            Authorization: `Basic ${process.env.MAUTIC_AUTH}`,
          },
        })
          .then((response) => {
            // console.log(
            //   "Check if the user is a contact API reponse:",
            //   response
            // );
            return response.json();
          })
          .then((data) => {
            // console.log("Check if the user is a contact API data:", data); // Log the API response

            if (data.total > 0) {
              // Contact exists - add to segment
              fetch(`${baseURL}/api/segments/4/contacts/add`, {
                method: "POST",
                headers: {
                  "Content-Type": "application/json",
                  "X-Requested-With": "XMLHttpRequest",
                  Authorization: `Basic ${process.env.MAUTIC_AUTH}`,
                },
                body: JSON.stringify({
                  ids: [data.contacts[0].id],
                }),
              });
            } else {
              // Contact does not exist - add new contact
              fetch(`${baseURL}/api/contacts/new`, {
                method: "POST",
                headers: {
                  "Content-Type": "application/json",
                  "X-Requested-With": "XMLHttpRequest",
                  Authorization: `Basic ${process.env.MAUTIC_AUTH}`,
                },
                body: JSON.stringify({
                  firstName: user.name ? user.name : "",
                  lastName: user.name ? user.name : "",
                  email: user.email,
                  overwriteWithBlank: true,
                  lastActiveDate: new Date().toISOString(),
                }),
              })
                // Add contact to segement
                .then((response) => {
                  console.log(
                    "Add contact to segement API response:",
                    response
                  );
                  return response.json();
                })
                .then((data) => {
                  console.log("Add contact to segement API data:", data); // Log the API response

                  fetch(`${baseURL}/api/segments/1/contacts/add`, {
                    method: "POST",
                    headers: {
                      "Content-Type": "application/json",
                      "X-Requested-With": "XMLHttpRequest",
                      Authorization: `Basic ${process.env.MAUTIC_AUTH}`,
                    },
                    body: JSON.stringify({
                      ids: [data.contact.id],
                    }),
                  });
                })
                .catch((error) => {
                  // Handle errors that happen in the promise chain
                  handleError(error);
                });
            }
          })
          .catch((error) => {
            // Handle errors that happen in the promise chain
            handleError(error);
          });