CORS issue on form submit?

Product Support
1

Sorry if this is a rehashed issue. I searched around and couldn’t find anything that struck a chord with my situation.

Your software
My Mautic version is: 4.0
My PHP version is:7.4
My Database type and version is:

Your problem
My problem is: Manual entry form submits, submit data but fail to report back in the UI that the form was sent. I am getting what I think is a CORS error and can’t figure out how to edit the htaccess to allow for the subdomain to access properly. Oddly enough, using the WordPress Mautic plugin avoids this problem.

I need to add the form code manually as I need to trigger a script to allow for Google Ads conversion tracking with an onsubmit. It’d be nice if there was a way we could add that function directly in Mautic and still use the WP Plugin.

torontoheadshot.com > Main site with form
marketing.torontoheadshot.com > Mautic install

In Mautic, under CORS, I have both domains added on separate lines using the same protocol.

I found this code for the htaccess file on the main site but it still doesn’t work.

SetEnvIf Origin ^(https?://(?:.+\.)?torontoheadshot\.com(?::\d{1,5})?)$   CORS_ALLOW_ORIGIN=$1
Header append Access-Control-Allow-Origin  %{CORS_ALLOW_ORIGIN}e   env=CORS_ALLOW_ORIGIN
Header merge  Vary "Origin"

These errors are showing in the log:

Chrome console


POST https://marketing.torontoheadshot.com/form/submit?formId=1&_gl=1*1k96bcj*_ga*MTU2Mzk1MzM3OC4xNjIzNjgwNjU5*_ga_CV7J0KBEG0*MTYzMjk0MzExMS44LjEuMTYzMjk0Nzg0MC4w 500


Uncaught DOMException: Blocked a frame with origin "https://marketing.torontoheadshot.com" from accessing a cross-origin frame.
    at HTMLDocument.<anonymous> (https://marketing.torontoheadshot.com/media/js/app.js?vadf2fdae:271:162)
    at mightThrow (https://marketing.torontoheadshot.com/media/js/libraries.js?vadf2fdae:355:18)
    at process (https://marketing.torontoheadshot.com/media/js/libraries.js?vadf2fdae:357:89)
(anonymous) @ libraries.js?vadf2fdae:366
setTimeout (async)
jQuery.readyException @ libraries.js?vadf2fdae:366
(anonymous) @ libraries.js?vadf2fdae:366
mightThrow @ libraries.js?vadf2fdae:355
process @ libraries.js?vadf2fdae:357
setTimeout (async)
(anonymous) @ libraries.js?vadf2fdae:360
fire @ libraries.js?vadf2fdae:344
fireWith @ libraries.js?vadf2fdae:350
fire @ libraries.js?vadf2fdae:351
fire @ libraries.js?vadf2fdae:344
fireWith @ libraries.js?vadf2fdae:350
process @ libraries.js?vadf2fdae:359
setTimeout (async)
(anonymous) @ libraries.js?vadf2fdae:360
fire @ libraries.js?vadf2fdae:344
fireWith @ libraries.js?vadf2fdae:350
fire @ libraries.js?vadf2fdae:351
fire @ libraries.js?vadf2fdae:344
fireWith @ libraries.js?vadf2fdae:350
ready @ libraries.js?vadf2fdae:368
completed @ libraries.js?vadf2fdae:368

Steps I have tried to fix the problem:

2

So, the plot now thickens.

I decided to remove the manual form code and go back to the WP Plugin using the shortcode to insert the form.

Now when I submit the form I am getting redirected to the Mautic install and am shown a 500 error.

I have triple-checked the form ID. There’s only one form so it’s not too difficult to check lol.

I went and disabled the CORS settings inside of Mautic, which made no difference. I removed the CORS code I added to the htaccess file on the main site, which made no difference.

As far as I can tell I have put everything back to how it was before and it’s really broken now.

As it stands now, the form submits do go through and the form actions inside of Mautic are getting triggered. But, the front-facing site does not show a successful form submit and is redirecting to the Mautic install.

It’s kind of a big problem.

3

Are you using any action in the form?
Do you have another integration connected to Mautic where leads are pushed in?

4

Hey Joey,

Thanks for jumping in.

I have no explanation for it but out of the blue everything just started working again.

I have no idea what was going on.

I have the manual form code on the page and I’ve added the onsubmit call too.

Everything’s purring like a kitten again.