How to setup Recaptcha?

[giqnt]

Describe the bug

I don't know what the cause of this, but if I directly goes into the page by entering the url(or just reloading the page by pressing f5), the script doesn't load correctly as you can see on the reproduction link.
But if i navigate to other page and go back to this page(ex. click about and then click home again), it loads correctly.
You can see if script loads correctly or not by that reCaptcha v2 check box.
As you can see, i load the script on svelte:head, but it doesn't work even if i put the script tag on app.html.
Oh and error log below occurs sometimes.

Reproduction

https://stackblitz.com/edit/sveltejs-kit-template-default-cgazrx?file=src/routes/+page.svelte

Logs

recaptcha__ko.js:805 Uncaught DOMException: Blocked a frame with origin "https://www.google.com" from accessing a cross-origin frame.
    at Y.Ip (https://www.gstatic.com/recaptcha/releases/3TZgZIog-UsaFDv31vC4L9R_/recaptcha__ko.js:805:180)
    at Array.<anonymous> (https://www.gstatic.com/recaptcha/releases/3TZgZIog-UsaFDv31vC4L9R_/recaptcha__ko.js:43:12)
    at Object.init (https://www.gstatic.com/recaptcha/releases/3TZgZIog-UsaFDv31vC4L9R_/recaptcha__ko.js:812:313)
    at https://www.google.com/recaptcha/api2/bframe?hl=ko&v=3TZgZIog-UsaFDv31vC4L9R_&k=6LfbuqMhAAAAAGOypZN7pqlSpgkVdI0PzPC8XNyH:184:30
Y.Ip @ recaptcha__ko.js:805
(anonymous) @ recaptcha__ko.js:43
(anonymous) @ recaptcha__ko.js:812
(anonymous) @ bframe?hl=ko&v=3TZgZIog-UsaFDv31vC4L9R_&k=6LfbuqMhAAAAAGOypZN7pqlSpgkVdI0PzPC8XNyH:184

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (12) x64 11th Gen Intel(R) Core(TM) i5-11400 @ 2.60GHz
    Memory: 7.60 GB / 15.84 GB
  Binaries:
    Node: 16.15.1 - C:\Program Files\nodejs\node.EXE
    npm: 8.18.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (104.0.1293.63)
  npmPackages:
    @sveltejs/adapter-auto: next => 1.0.0-next.66
    @sveltejs/kit: ^1.0.0-next.431 => 1.0.0-next.437
    svelte: ^3.46.0 => 3.49.0
    vite: ^3.0.0 => 3.0.9

Severity

blocking an upgrade

Additional Information

No response

[giqnt]

• It works fine when i build it to Vercel.

[CaptainCodeman]

You probably need to enable localhost for the reCaptcha key or set Access-Control-Allow-Origin HTTP header.

[giqnt]

You probably need to enable localhost for the reCaptcha key or set Access-Control-Allow-Origin HTTP header.
@CaptainCodeman

well i already added localhost and thats why it works when i re-navigate to the page.
How can i set that HTTP header?

[CaptainCodeman]

hooks?

[giqnt]

Wdym hooks?
How can i use hooks to resolve this?

[CaptainCodeman]

You can use the hooks handle method to set the headers

see example setting x-custom-header: https://kit.svelte.dev/docs/hooks#handle

[giqnt]

You can use the hooks handle method to set the headers

see example setting x-custom-header: https://kit.svelte.dev/docs/hooks#handle

doesnt that only hooks to response and not request?