How to Enable CORS/AJAX Requests for any HubSpot API

HubSpot has a set of great APIs that offer a ton of flexibility in terms of getting the data you need out of your HubSpot portal. The issue is – at least for all the front-end developers out there that prefer to do things client-side – HubSpot blocks client-side cross-origin requests and doesn’t offer a way to make server-side requests with HubL. Argh! This leaves you with 1 option: use your own server.

The good news is, instead of using your own server to host a whole new website/web app, you can limit your server resources to just mirror the HubSpot API and then enable CORS so you can make all the AJAX/Fetch requests that you want. Brilliant! Here’s how we tackled this:

PHP To The Rescue

We run our WordPress sites on a VPS server from Dreamhost running the tried and true LAMP stack. So we decided to use PHP to make the server side requests. This saves us from having to spin up a new server specifically for this menial task. The simplest way to mirror a JSON API with PHP is to use the file_get_contents function. What this does is grab all the content at any given URL and stores it as a string. Then, we can output that string onto the page. Here is the full code we used to mirror HubSpot’s Contact List API:

<?php
$jsonurl = "https://api.hubapi.com/contacts/v1/lists/" . $_GET["list"] . "/contacts/all?hapikey=" . $hapikey . "&count=100";
$json = file_get_contents($jsonurl);
echo $json;
?>Code language: PHP (php)

With these 3 lines of PHP you’re able to make the mandatory server side request – to keep HubSpot happy – and mirror the API exactly. You could even mimic the URL path if you wanted to stay consistent. Now, all that’s left to do is enable CORS on your server so you can start making your client-side requests.

Enable CORS on Your Server

Since we are running an Apache server, we just needed to add the following to the .htaccess file:

<IfModule mod_headers.c>
  Header set Access-Control-Allow-Origin "*"
</IfModule>Code language: Apache (apache)

If you want to enable some protection from anyone abusing your server, you should only allow the specific domain(s) you’ll be making your requests from rather than allowing all domains. For more info about CORS visit Mozilla’s MDN Web Docs article on the subject. If you aren’t running an Apache server, there are a bunch of instructions for implementing CORS on specific server platforms at enable-cors.org.

Voila!

Now you can create your JavaScript web app powered by HubSpot’s APIs all from within a HubSpot portal. You can do things like:

$.getJSON("api.yourcorsenabledserver.com/contacts/all?list=123", function() {
  console.log( "success" );
});Code language: JavaScript (javascript)

Or, if you’re a vanilla JS kinda person:

fetch('api.yourcorsenabledserver.com/contacts/all?list=123')
  .then(function(response) {
    return response.json();
  })
  .then(function(myJson) {
    console.log(JSON.stringify(myJson));
  });Code language: JavaScript (javascript)

---

We hope that in the future we’ll be able to use HubSpot APIs natively from within a HubSpot CMS hosted website, but until then, we think this solution works pretty well. If you try this or have done something similar, we’d love to hear about it in the comments!