I'm currently in the process of making a custom form module that essentially takes the input from the form on submit, and sends an API POST request using the input that the user has submitted.
The problem is that I keep getting the following error :
'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.'
I want to know what the best solution to this problem could be? When I run the website on a chrome tab with disabled web security, it seems to work fine, but this doesn't seem like a robust long-term solution.
I'm quite new with web dev and API integration so any suggestions would be greatly appreciated, thanks!
Thanks for sharing your solution. I tweakid it a little bit because the javascript didn't saw the iframe:
function submitForm() { console.log("test script"); var hbFrameId = 'hs-form-iframe-0'; var hbFormId = 'hsForm_' + hubspot_form_id; var btnClass = 'hs-button primary';
var frm = []; var myForm = document.getElementById(hbFrameId).contentWindow.document.getElementById(hbFormId); var iframe = document.getElementById(hbFrameId); var frm = document.getElementById(hbFrameId).contentWindow.document.getElementById(hbFormId); console.log(frm); console.log(frm.elements[0]); frm.elements[0].value = "{{profile.email}}"; const elem = frm.elements.length; console.log(frm.elements[0]); for(var i=0; i < elem; i++){ var hbField = frm.elements[i]; for(var j=0; j < elem; j++){ var myField = myForm.elements[j]; if(myField.name == ("hb-"+hbField.name)){ hbField.value = myField.value; } } } var dataJson = $(frm).serializeArray(); var data = new FormData($(frm)[0]); $(frm).submit(); }
XMLHttpRequest cannot load apiendpoint URL. Redirect from 'apiendpoint URL' to 'apiendpoint URL' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'test URL' is therefore not allowed access.
In the path of apiendpoint.com I added in .htaccess following code:
Do you know how I would edit/add the htaccess code for the website/module?
The form module doesn't seem to have a .htaccess file (maybe I add one in the linked files section?), and the actual website using the form module I created using the HubSpot website page builder and I don't see a way to add/edit a .htaccess file in there as well.
Because, HubSpot supports same domain with ajax request only or IP allowlisted on third party api if you can otherwise use serverless function for that.
Hope this helps!
If we were able to answer your query, kindly help the community by marking it as a solution.