CORS issue on form submit

Product Support
,
1

Your software
My Mautic version is: 4.0.1
My PHP version is: 7.4.18
My Database type and version is: MariaDB 10.5.9

Your problem
My problem is: I can’t send HTTP requests from my website to the Mautic form. I’m getting a CORS error. In Mautic I enabled the CORS with http://localhost:8080 (for testing purposes) and https://mydomain.com separated by a newline, but the same error.

My code:

const formData = new FormData()

formData.append('mauticform[formId]', '1')
formData.append('mauticform[email]', 'example@example.com')

axios
  .post('https://mydomain.com/form/submit?formId=1', formData)
  .then(() => {
    console.log('Done!')
  })
  .catch((err) => {
    console.log(err)
  })

Error message:

Access to XMLHttpRequest at 'https://mydomain.com/form/submit?formId=1' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
2

Hi,
Did you update your .htaccess in mautic root by adding

Header always unset X-Frame-Options

at the end?

3

Hello, thank you for your reply, I’m not very familiar with the .htaccess syntax, I added the following lines to the top of .htaccess file, but the same CORS error:

<IfModule mod_headers.c>
    Header always unset X-Frame-Options
</IfModule>

The form that I use in my website is not a Mautic form iframe, it’s an HTML form with an event listener to submit the form to Mautic with an HTTP POST request.

4

I went the Mautic/i-frame route as I found it way easier to build/maintain.

5

The HTML form + HTTP POST request makes the form customizable (custom design, custom validation, handling multi-language, and responsiveness, …) Is there any way to communicate with the Mautic form without the iframe?

6

I’ve played around with using Integromat to post from a Facebook lead form to my Mautic lead form but haven’t really had the time to make that work. Both Mautic and Integromat forums say it can be done.

My use case was to have a single mautic entry point for multiple lead sources for the same campaign theme.

You could do the same with Integromat catching the POST/Submit and pushing it at the Mautic form, or maybe even directly if you know how to post the results of one form into another.

1 Like
7

Finally, I solved the problem! I checked the source code of the Mautic form controller, and I figure out that Ajax requests are handled in a different way:

  1. Add X-Requested-With to the request headers:
headers: {
  'X-Requested-With': 'XMLHttpRequest',
}
  1. Add the mauticform[messenger] field to the form data:
formData.append('mauticform[messenger]', '1')

The full code:

axios
  .post(
    'https://mydomain.com/form/submit',
    {
      mauticform: {
        formId: 1,
        email: 'example@example.com',
        messenger: 1,
      },
    },
    {
      headers: {
        'X-Requested-With': 'XMLHttpRequest',
      },
    }
  )
  .then(() => {
    console.log('Done!')
  })
  .catch((err) => {
    console.log(err)
  })
2 Likes
8

Hello,

I also have an cors-error when I try to submit via javascript-code to a mautic form.

I tried your axios-code like this:

axios
    .post(
      'https://mymautic.de/form/submit',
      {
        mauticform: {
          formId: 16,
          messenger: 1,
          firstname: this.formData.firstName,
          lastname: this.formData.lastName,
          email: this.formData.email,
          organization: this.formData.organization,
        },
      },
      {
        headers: {
          'X-Requested-With': 'XMLHttpRequest',
        },
      }
    )
    .then(() => {
      console.log('Done!');
    })
    .catch((err) => {
      console.log(err);
    });

With this I get the following error:

Access to XMLHttpRequest at ‘https://mymautic.de/form/submit’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control’

I did not change anything on the mautic server side, for example htaccess or something.

When I try this from postman it works without any problem.

Any idea how to solve this?

Best regards,

Timo

9

One addition: When I add http://localhost:3000 to valid-cors-domains in mautic config it works!

I just don’t know if it’s good idea to do it this way.