CORS Issue with the re-captcha

[THGAmanowski]

Hello!

Having some issues using the re-captcha in my svelte app. I manage to get the ready state to fire, but then all I get is this error:

caught DOMException: Blocked a frame with origin "https://www.google.com" from accessing a cross-origin frame.
    at Ci.Yy.w8 (https://www.gstatic.com/recaptcha/releases/85AXn53af-oJBEtL2o2WpAjZ/recaptcha__en.js:721:217)
    at Array.<anonymous> (https://www.gstatic.com/recaptcha/releases/85AXn53af-oJBEtL2o2WpAjZ/recaptcha__en.js:40:284)
    at Object.init (https://www.gstatic.com/recaptcha/releases/85AXn53af-oJBEtL2o2WpAjZ/recaptcha__en.js:730:258)
    at https://www.google.com/recaptcha/api2/bframe?hl=en&v=85AXn53af-oJBEtL2o2WpAjZ&k=6LfetkseAAAAAM2BZdN4nLPitmM3skOeY9_jkqyq:184:30

Has anyone seen this before? I've tried adding the captcha as a div I render on it's own but I get the same issue in the end.

Does it need to be hosted on a web server rather than just localhost? Not sure why it would work for others.

[basaran]

Hi, the cors is probably coming from your vite dev server. Check your svelte config and look for a cors setting, may be you have something there?

[THGAmanowski]

Hi, the cors is probably coming from your vite dev server. Check your svelte config and look for a cors setting, may be you have something there?

Thanks for the quick reply! I'm not entirely sure where I'd be looking for such a config. The only things we have are rollup configs.

[basaran]

these are usually in the svelte.config.js, are you using a standard project or do you bundle with rollup yourself with custom configuration?

[basaran]

Here is the link to svelte vite config from the docs:

https://kit.svelte.dev/docs/configuration#vite

[THGAmanowski]

It's a shareable web component library, so we have some rollup configs we've added, a Form.wc.svelte component and a App.svelte for demoing of this component. We don't have a svelte vite config.

I've managed to get the captcha working on the demo if I put it in App.svelte - but as soon as it's in the Form.wc.svelte web component and I include that component in App.svelte I get the cors error.