topic Re: Vue.JS Load Chat Widget CORS error in APIs & Integrations

Vue.JS Load Chat Widget CORS error

JLowe3 — Thu, 24 Feb 2022 12:51:59 GMT

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

Re: Vue.JS Load Chat Widget CORS error

PamCotton — Fri, 25 Feb 2022 21:54:30 GMT

Hello @JLowe3, happy Friday!

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

Thank you,

Pam

Re: Vue.JS Load Chat Widget CORS error

stefen — Sun, 27 Feb 2022 16:15:55 GMT

@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

Re: Vue.JS Load Chat Widget CORS error

JLowe3 — Mon, 28 Feb 2022 15:06:37 GMT

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!