title: reCAPTCHA v3 with vue-recaptcha-v3 (v1.8.0) constantly failing verification with the fetch API
body: <p>In my VueJS app with the node module <code>vue-recaptcha-v3</code>, <strong>reCAPTCHA v3 constantly fails in the verification step</strong>. The "protected by reCAPTCHA" banner appears on the page like it should, and the response I get before the verification step is fine. When I try to <code>POST</code> the token to <code>https://www.google.com/recaptcha/api/siteverify</code> via <code>fetch</code>:</p>
  
  <pre><code>// Execute reCAPTCHA with action "login".
  const response = await this.$recaptcha('contact');
  const data = {
      secret: secretKey,
      response,
  };
  
  try {
      const validationResponse = await fetch(validationUrl, {
          method: 'POST',
          headers: {
              Accept: 'application/json',
              'Content-Type': 'application/json',
          },
          body: JSON.stringify(data),
      });
  [...]
  </code></pre>
  
  <p>I simply get the error <code>Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.google.com/recaptcha/api/siteverify. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).</code></p>
  
  <p>So I use <code>mode: 'no-cors'</code> instead:</p>
  
  <pre><code>[...]
  const validationResponse = await fetch(validationUrl, {
      method: 'POST',
      mode: 'no-cors',
      headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
  });
  [...]
  </code></pre>
  
  <p>which then leads to this response:</p>
  
  <pre><code>{
    "success": false,
    "error-codes": [
      "missing-input-response",
      "missing-input-secret"
    ]
  }
  </code></pre>
  
  <p>I suppose you can't send a content-type of json in <code>no-cors</code> mode (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Supplying_request_options" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch#Supplying_request_options</a>), so I use <code>multipart/form-data</code> as a content type instead:</p>
  
  <pre><code>const response = await this.$recaptcha('contact');
  const formData = new FormData();
  formData.append('secret', secret_key);
  formData.append('response', response);
  
  try {
      const validationResponse = await fetch(validationUrl, {
          method: 'POST',
          mode: 'no-cors',
          headers: {
              Accept: 'application/json',
              'Content-Type': 'multipart/form-data',
          },
          body: formData,
      });
  [...]
  </code></pre>
  
  <p>But this only leads to this response from Google:</p>
  
  <pre><code>&lt;HTML&gt;
  &lt;HEAD&gt;
  &lt;TITLE&gt;Bad Request&lt;/TITLE&gt;
  &lt;/HEAD&gt;
  &lt;BODY BGCOLOR="#FFFFFF" TEXT="#000000"&gt;
  &lt;H1&gt;Bad Request&lt;/H1&gt;
  &lt;H2&gt;Error 400&lt;/H2&gt;
  &lt;/BODY&gt;
  &lt;/HTML&gt;
  </code></pre>
  
  <p>I really don't know what to do any more - what am I missing?</p>