Vue.JS Load Chat Widget CORS error

[JLowe3]

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. 

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.

Any help would be appreciated

[JLowe3 · Accepted solution]

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!

[stefen]

@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

[PamCotton]

Hello @JLowe3, happy Friday!

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

Thank you,

Pam