Access to XMLHttpRequest blocked by CORS policy

sdeveloper
Participant

Hi everyone,

 

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!

5 Replies 5
webdew
Top Contributor | Diamond Partner

Hi @sdeveloper ,

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.

Thanks and Regards.

HVol
Member

I add an API with following script in let's say https://besttigwelders.com/

<script src="http://apiendpoint.com/api/v1/api.js"></script>

<div id="api" data-apikey="LA59CJI9HZ-KIJK4I5-3CKJC"></div>
api.js

$(function () {

apikey = $('#api').data('apikey');
$("#api").load("http://apiendpoint.com?apikey=" + apikey);

})
When I load the page, I get following error:

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:

Header set Access-Control-Allow-Origin "*"

sdeveloper
Participant

Thanks for the response.

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.

 

0 Upvotes
himanshurauthan
Recognized Expert | Platinum Partner

Hello @sdeveloper,

 

Try by adding the domain in Settings > Tracking & Analytics > Tracking code > Advanced tracking tab then add your domain in Additional site domains.

 

This post explains about CORS for your reference - https://stackoverflow.com/questions/20035101/why-does-my-javascript-code-receive-a-no-access-control...

 

Hope this helps!

 

Regards,

 

Digital Marketing & Inbound Expert In Growth Hacking Technology
sdeveloper
Participant

Thanks for the response.

The domain already seems to be in the additional site domain, so it doesn't let me add the specific site..

Any other suggestions would be greatly appreciated.

0 Upvotes