vue-recaptcha-v3 | A simple and easy to use reCAPTCHA library | Form library

Ok, I finally found the answer here at StackOverflow: reCAPTCHA - error-codes: 'missing-input-response', 'missing-input-secret' when verifying user's response (missing details on POST) - long story short: Googles reCAPTCHA verification server only seems to accept "Content-Type": "application/x-www-form-urlencoded", so the data sent in my case needs to be

body: 'secret=' + secretKey + '&response=' + response.

With these settings no error occurs (Please note: Data sent like this needs to be sanitized vie URLencode! I left that out in this example.) But still it's confusing that e.g. Firefox shows the correct response from Google, but the Vue application can't read it at all - response.ok euqals false!

The reason: The browser/client can't deal with a no-cors response by itself. The server has to do this! So the reCAPTCHA response has to be sent to your server and the server (e.g. PHP) has to send the data to Google's verification script. There's no other way around this. Google reCAPTCHA's docs are missing all these important points.

Also - to my own shame I just realized this now - it totally makes sense, because for the reCAPTCHA validation you need your secret reCAPTCHA key, and that one should definitely not be stored in your JS application that's sent to the client. You never give away your secret.