CORS error When Fetching Contact Details

[CHutt5]

Hi,

I have an email template that contains a link in the footer to on our wordpress pages along with a contacts  email attatched to the URL as a parameter.

On the page, I have script setup on one of our wordpress pages that calls the Hubspot Contact API.

However when I inspect the page I see the following errors:

Can someone point me in the direction solve this?

Thanks

[CHutt5]

Hey @coldrickjack,

I think the first option would suit us better I'd say.

Could you explain the steps involved in this?

Much appreicated

Cian

[CHutt5]

Hi @coldrickjack,

Thanks for your reply.

Yes that makes sense.

I'm a little unsure of what you meant by "The way to fix this is to create a back end service that calls the HubSpot API and passes the response/data back to your front end (website).". Could you explain this a little more?

As mentioned were sending the data to a wordpress page. so would we need to create the backend service in Wordpress or would it be something separate?

Thanks for the notes, just on them:

 - I was using a private app access token but I see I need to add it as a header in the GET request (see below as an example)

headers: {
      'Authorization': `Bearer ${YOUR_TOKEN}`,

Thanks

Cian

[coldrickjack]

Hey @CHutt5,

Basically what you'd need to do is host a script on the back end of your website that would call the HubSpot API and return the data to the front end. If you are hosting your own instance of WordPress you should be able to do this fairly easily.

Another option to consider is leveraging serverless functions which are provided by the likes of AWS (Lambda), Google (Cloud Functions). More information on that here. The benefits of using these platforms is that you don't need to worry about the infrastructure or hosting, it's part of the service and can create functions/services on the back end to do whatever you like within the realms of what is possible with the APIs!

[coldrickjack]

Hey @CHutt5,

You can't make requests to the HubSpot APIs from the front end for security reasons hence the CORS error being thrown. This is quite common for RESTful APIs. More information here. You'll notice in your screenshot a bad actor would be able to view your API key if they were on your website and if they had that could then pull whatever data I'd like out of your portal which presents a major security risk. 

The way to fix this is to create a back end service that calls the HubSpot API and passes the response/data back to your front end (website). This keeps your keys secret and is more secure. See the diagram below for a visual representation on how you can achieve it. The part you're missing is that proxy or back end server.

 

Also a couple of observations based on the screenshot you shared:

• It looks like your using an API key, HubSpot deprecated API keys some time ago so even if CORS was supported I'd expect your request to fail in the way your doing it right now. I believe the correct way to authenticate your requests is to either use a private app (access token) or utilise OAuth2.0. 
• It appears you are using the legacy API endpoints (v1). You should use the newer API endpoints (v3).

I hope that this helps.