net::ERR_ABORTED 400 (Bad Request)

[AkshithaReddy1899]

Hello everyone,

I have an issue with verifying the captcha, been stuck on the same thing for 4 hours now, tried a bit of everything, but nothing seems to work, I am just starting with Vue, Kindly someone let me know if I have made a mistake somewhere

<template>
  <vue-friendly-captcha @done="verifyCaptcha" sitekey=sitekey />
</template>

<script setup>
import VueFriendlyCaptcha from "@somushq/vue3-friendly-captcha";

const verifyCaptcha = async () => {
  const { data: responseData } = await useFetch(
    "https://api.friendlycaptcha.com/api/v1/siteverify",
    {
      method: "POST",
      mode: 'no-cors',
      headers: {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*",
      },
      body: JSON.stringify({
        solution: document.querySelector(".frc-captcha-solution").value,
        secret: apikey,
        sitekey: sitekey,
      }),
    }
  );

  console.log(responseData);
};
</script>

[jozsefsallai]

Hi. Would be nice to see the actual response from Friendly Captcha's server (Response tab in your last screenshot).

But ideally, you wouldn't want to make the verification request in your frontend code, as you'd be exposing your verification secret to the public and a bad actor could take it and use for their own projects. You might want to delegate that task to your backend/server code and only send the captcha solution as part of the HTTP request to your server.