Vue.JS Load Chat Widget CORS error

Develop, Build & Integrate APIs & Integrations
1

Hi,

I’m trying to load the Hubspot Chat widget into my VueJS app.

I have the tracking script installed within index.html and then I want to be able to call the load function from within Vue.

JLowe3_0-1645707047392.png
JLowe3_0-1645707047392.png857×177 30.9 KB

However, whenever I call the load function (even in the console), I seem to get a CORS error and I can’t load the chat widget.

JLowe3_1-1645707087458.png
JLowe3_1-1645707087458.png1161×117 40.3 KB

Any help would be appreciated

2

Hello @JLowe3, happy Friday!

I would like to invite some top experts @miljkovicmisa, @stefen @jpsanchez any recommendations to @JLowe3?

Thank you,

Pam

3

@JLowe3 are you using nuxt.js by chance? If so, it might be trying to run the script server side instead of client side. Try putting it inside a client only component as described here: https://nuxtjs.ir/api/components-client-only

4

Hi @PamCotton @stefen,

We’re just using standard Vue 3. However, I seem to have fixed the issue, we’re using Azure App Insights in our application and we have a setting enabled that allows us to trace every HTTP request in the app for debugging.

This adds a “traceparent” header to each request and hubspot doesn’t seem to allow that so we’ve allowlisted the hubspot domain in the App Insights config and everything is working perfectly.

Thanks for reaching out to help!