Serverless proxy to fix CORS

Developer Support APIs & Integrations
1

Hello,
We are developing SPA on top of VueJS framework, and we are using Hubspot as:
- our general user analytics tool; We identify users by id and email, also we send pageViews (here’s the simplified code):

// identify
hsq.push([
 "identify",
 {
 id: userId,
 ...(email && { email })
 }
]);

// later in our router
hsq.push(["setPath", path]);
hsq.push(["trackPageView"]);

- for hubspot chat
We are experiencing CORS issue as follows:

Access to XMLHttpRequest at 'https://api-eu1.hubspot.com/livechat-public/v1/message/public?portalId=OUR_APP_ID&conversations-embed=(...) 
from origin 'OUR_APP_DOMAIN' has been blocked by CORS policy: Request header field sentry-trace is not allowed by Access-Control-Allow-Headers in preflight response.

That sometimes causes our analytics to be not sent at all or makes our chat button disappear.
What we have tried:
- (at first) passing our domain to tracking allow list
- using window.HubSpotConversations?.resetAndReloadWidget(); on each router change to at least make the chat button appear again.

We see the potential solution in making our backend (Btw we use Firebase Cloud Functions) be the proxy between our client and hubspot.
The problem is that we are only using chat & analytics - we call analytics from the client, and we do not talk to hubspot API in any other way. Meaning we don’t know where to start, to actually make the request `https://api-eu1.hubspot.com/livechat-public/v1/message/public…` being proxied by us.
Any thoughts on that?

2

Hey, @pbilka, have you seen this post and resource from our Community Champion @stefen? — If you’re getting CORS errors
Here is the official documentation on CORS/AJAX requests:

For the most part, the HubSpot APIs do not support cross-origin (CORS) AJAX requests. Making the request client-side using JavaScript would expose any authentication you’re using for the request. In order to use JavaScript/AJAX, you would need to make the request (excluding any authentication) to an external server that could then add the needed authentication and make requests to HubSpot’s APIs server-side.

The exceptions to this rule are:

@tjoyce @NUdayakumar @LMeert, did I miss anything fundamental here?

Thank you for taking a look! — Jaycee

3

Hello @Jaycee_Lewis!
Thank you for your response!

Yes we checked the discussion - If you’re getting CORS errors - but with no working results. From our understanding, we actually are not using HubSpot API designed for servers. In that case it’s hard for us to understand how we should proxy a tracking code.

Let me explain, maybe I’m missing something obvious… :slightly_smiling_face:

What we only use HubSpot for (at least for now) is the tracking code. We followed this guide:

The docs, from my understanding, say that this code runs only on browser:

var _hsq = window._hsq = window._hsq || [];
Then we do the identify action as being said in the docs, then some pageViews tracking. We also use a hubspot chat, that we are enabling using only Hubspot settings (as the tracking code is already implemented in the app).
My point is that from our understanding, our app makes calls from browser to your API - API, that is designed for client usage. By the way, we do not use any other code examples that are placed in this article - Accounts Dashboard | HubSpot
And we are still, sometimes, getting the CORS error:

Access to XMLHttpRequest at 'https://api-eu1.hubspot.com/livechat-public/v1/message/public?portalId=OUR_APP_ID&conversations-embed=(...) 
from origin 'OUR_APP_DOMAIN' has been blocked by CORS policy: Request header field sentry-trace is not allowed by Access-Control-Allow-Headers in preflight response.

I hope I described it in a way it’s clear now. :slightly_smiling_face: If not, feel free to ask.
Thanks in advance!