I’m trying to make requests to the HubSpot API using JavaScript fetch but I keep getting a CORS error in the browser console.
The error message looks like this:
Access to fetch at 'https://api.hubapi.com/contacts/v1/lists/all?hapikey=mykey' from origin 'https://mysite.hubspotpages.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Is there a way to fix the Access-Control-Allow-Origin header issue with HubSpot’s API? If not, what are some alternative approaches I can use to work with their API from the frontend?
CORS issues with HubSpot’s API are indeed a common challenge. Unfortunately, you cannot resolve this on the client side since HubSpot intentionally prevents cross-origin requests to protect sensitive information like API keys. I encountered a similar issue last year and had to pivot my strategy. The most effective solution I found was creating a backend proxy server. Your frontend can send requests to your server, which securely communicates with HubSpot using your API key. Alternatively, you might consider using HubSpot’s JavaScript SDK if applicable, but be aware that it lacks some functionality compared to direct API interactions. The proxy method is generally best for maintaining security and full control over your API calls.