topic Re: api calls from local env in APIs & Integrations

api calls from local env

KToo — Thu, 23 Dec 2021 14:56:52 GMT

I have a very simple form I created in wordpress and I used axios to post an email address using your CreateOrUpdate api endpoint like below:

var newLead = {

"properties": [

{

"property": "email",

"value": this.email.value

}

]

}

const email = this.email.value

const apiCall = `https://api.hubapi.com/contacts/v1/contact/createOrUpdate/email/${email}/?hapikeys=${this.apiKey}`

try {

const response = await axios.post(apiCall, newLead)

} catch (e) {

console.log("Sorry, couldn't add lead")

}

However, I am running into this problem:

Access to XMLHttpRequest at 'https://api.hubapi.com/contacts/v1/contact/createOrUpdate/email/a@b.com/?hapikeys=myApiKey' from origin 'http://php.local' 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.

I'm using my testing account api key for this. I also tried using the api key in my "real" account but neither worked. Please advise. Thanks.

Re: api calls from local env

JBeatty — Thu, 23 Dec 2021 15:33:03 GMT

Hi @KToo,

A few things here, first the reason it is being blocked is becuase browsers these days block most post requests from the client unless the endpoint specifically enables Cross-Origin Resource Sharing (CORS). Which the hubspot endpoints do not. To get around this you'll need to set up another endpoint on a seperate server. I would recommend using AWS serverless functions, which are free for most users' small loads, and you can enable CORS on your endpoints.

Secondly do not put this code in the browser ever. You had the api key in the browser, if for some reason HubSpot did enable CORS, any person could go into the wordpress code and grab your api key, and grab all of your contact data, and then delete all of your contact for example. Never use your api key client side. Even if somehow you encrypt it, the request will still be unencrypted and they grab the api key by intercepting the request. This can also be fixed by setting up an endpoint soemwhere like AWS, where the call to this endpoint does not include the api key, but the code in AWS does have it.

Lastly, it looks like you are using a form to create leads, this can be completely avoided if you create a hubspot form which you can embed in your website. Then you do not have to mess with any code, or wory about your API key at all, and leads just get created when they fill out the form.

If you are just trying to test your API calls, then I would recomend a REST client, like Hopscotch or Postman. Neither of which have this CORS restriction. Another solution would be to test your API calls form the command line using a tool like curL, or running a Node app from the commandline, where you could still use axios.

Re: api calls from local env

KToo — Thu, 23 Dec 2021 19:10:48 GMT

Thanks for your reply. I'm new to development and I just wanted to try my
hand at using APIs. Would you be able to point me to any resources where I
can learn more about CORS in layman terms, setting up endpoints on separate
servers, using AWS serverless functions, etc? That would greatly help me on
the academic front.

That being said, I also want to get my website up and running using my own
form designs. Do you know what the best way to do this is? I read somewhere
that I could embed a hubspot form in my html and then hide it, and use js
to submit the form when the user clicks my button. Thanks for your help.

Re: api calls from local env

JBeatty — Thu, 30 Dec 2021 16:21:11 GMT

Hi @KToo.

The best place to learn about CORS would be Mozilla's Documentation, which I linked above, there is not too much to other then once it is properly enabled a javascirpt browser client can make post requests to it. To learn about settings up endpoints using AWS serverless functions I would recommend following Amazons Tutorials, there is a lot here, so it can take quite some time to fully understand everything.

To get style your form however you want, you'll need Marketing Hub and CMS Hub Professional or Enterprise, or Legacy Marketing Hub Basic only, at which point you can set as a raw html form. Then you can style it yourself. Though theoretically it could be possible to do it for free by customizing the forms embed code to modify the CSS of the DOM directly.