vue-recaptcha | Google ReCAPTCHA component for Vue.js | Form library

So stupid bug... I found out that in one of my vuex store files I have this:

One of the way to get the dynamic content from websites is to check XHR request on network tab of chrome when you press F12. You should check this when you make any action that changes the data.

The XHR request are mostly REST API calls that fetch data from server using GET/POST request. The output would be html or JSON response.

From the XHR request you can see form data, URL, output. You can simulate the same thing using POSTMAN to test it, and then use python request module to make GET/POST calls.

That seems to indicate a misconfigured site key. Also, there's no VueReCaptcha component (vue-recaptcha-v3 is only a plugin that provides API methods), so don't add to your template.

Based on the docs, these are the steps I took that worked for me:

1. Sign up for an API key pair for your site.

2. For Label, enter a label for the key (e.g., Codesandbox Demo)

3. For reCAPTCHA Type, choose reCAPTCHA v3.

4. For Domains, enter the domain where the key will be used (e.g., csb.app for Codesandbox), and click the + icon.

5. Check the box for Accept the reCAPTCHA Terms of Service.

6. Click Submit.

In your component, use the Composition API to setup your reCAPTCHA:

Although not strictly a solution to the problem, I was able to get past this error by migrating my project to Yarn.

style-resources-loader is for automatically importing certain resources. vue-cli-plugin-style-resources-loader is just a wrapper for that. There probably isn't a need for both, and that may be causing the problem. Try removing one of the following devDependencies:

• vue-cli-plugin-style-resources-loader
• style-resources-loader

For example:

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.

So I decided to remove all components and plugins, to see if Vue and Bootstrap-Vue worked on their own in IE11. It worked fine and I was receiving the usual Vue dev message in the console.

I then added in each module one by one until the website no longer rendered in IE11. This only happened when lottie-vuejs was enabled, and upon inspecting the console a syntax error is shown (expecting a '}''.

So the reason my project was not working was due to this plugin.