# CORS issue on form submit **URL:** \ **Category:** Product Support\ **Tags:** mautic-3, mautic-4\ **Created:** [October 22, 2021, 6:17pm UTC](https://forum.mautic.org/t/cors-issue-on-form-submit/21369 "2021-10-22T18:17:53Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![ayoubamine](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/ayoubamine/32/6084_2.png) [@ayoubamine](https://forum.mautic.org/u/ayoubamine)\ **Post date:** [October 22, 2021, 6:17pm UTC](https://forum.mautic.org/t/cors-issue-on-form-submit/21369/1 "2021-10-22T18:17:53Z")
**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](http://localhost:8080) (for testing purposes) and [https://mydomain.com](https://mydomain.com) separated by a newline, but the same error. My code: ```auto 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: ```auto 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. ``` ---
**Author:** ![patrickeidemiller](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/patrickeidemiller/32/511_2.png) [@patrickeidemiller](https://forum.mautic.org/u/patrickeidemiller)\ **Post date:** [October 22, 2021, 7:01pm UTC](https://forum.mautic.org/t/cors-issue-on-form-submit/21369/2 "2021-10-22T19:01:55Z")
Hi, Did you update your .htaccess in mautic root by adding Header always unset X-Frame-Options at the end? ---
**Author:** ![ayoubamine](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/ayoubamine/32/6084_2.png) [@ayoubamine](https://forum.mautic.org/u/ayoubamine)\ **Post date:** [October 22, 2021, 7:49pm UTC](https://forum.mautic.org/t/cors-issue-on-form-submit/21369/3 "2021-10-22T19:49:58Z")
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: ```auto Header always unset X-Frame-Options ``` 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. ---
**Author:** ![patrickeidemiller](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/patrickeidemiller/32/511_2.png) [@patrickeidemiller](https://forum.mautic.org/u/patrickeidemiller)\ **Post date:** [October 22, 2021, 10:22pm UTC](https://forum.mautic.org/t/cors-issue-on-form-submit/21369/4 "2021-10-22T22:22:32Z")
I went the Mautic/i-frame route as I found it way easier to build/maintain. ---
**Author:** ![ayoubamine](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/ayoubamine/32/6084_2.png) [@ayoubamine](https://forum.mautic.org/u/ayoubamine)\ **Post date:** [October 22, 2021, 10:58pm UTC](https://forum.mautic.org/t/cors-issue-on-form-submit/21369/5 "2021-10-22T22:58:04Z")
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? ---
**Author:** ![patrickeidemiller](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/patrickeidemiller/32/511_2.png) [@patrickeidemiller](https://forum.mautic.org/u/patrickeidemiller)\ **Post date:** [October 23, 2021, 4:45am UTC](https://forum.mautic.org/t/cors-issue-on-form-submit/21369/6 "2021-10-23T04:45:45Z")
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. ---
**Author:** ![ayoubamine](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/ayoubamine/32/6084_2.png) [@ayoubamine](https://forum.mautic.org/u/ayoubamine)\ **Post date:** [October 23, 2021, 4:57pm UTC](https://forum.mautic.org/t/cors-issue-on-form-submit/21369/7 "2021-10-23T16:57:52Z")
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: ```auto headers: { 'X-Requested-With': 'XMLHttpRequest', } ``` > 1. Add the `mauticform[messenger]` field to the form data: ```auto formData.append('mauticform[messenger]', '1') ``` > The full code: ```auto 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) }) ``` ---
**Author:** ![iparker](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/iparker/32/1936_2.png) [@iparker](https://forum.mautic.org/u/iparker)\ **Post date:** [September 30, 2023, 10:17am UTC](https://forum.mautic.org/t/cors-issue-on-form-submit/21369/8 "2023-09-30T10:17:19Z")
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: ```auto 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](https://mymautic.de/form/submit)’ from origin ‘[http://localhost:3000](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 ---
**Author:** ![iparker](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.mautic.org/iparker/32/1936_2.png) [@iparker](https://forum.mautic.org/u/iparker)\ **Post date:** [September 30, 2023, 10:22am UTC](https://forum.mautic.org/t/cors-issue-on-form-submit/21369/9 "2023-09-30T10:22:36Z")
One addition: When I add [http://localhost:3000](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.