Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 #1

Open
Kathou99 opened this issue Jul 2, 2022 · 2 comments

Comments

@Kathou99
Copy link

Kathou99 commented Jul 2, 2022

Hi, When I click submit I got this error,how I can fix it? I have write the same thing has your....

I have added isCaptchaValid(true); for my custom script

And on my side I run on the port 3000 not 4000

const submitData = token => {
      // call a backend API to verify reCAPTCHA response
      fetch('http://localhost:3000/verify', {
        method: 'POST',
        headers: {
          "Content-Type": "application/json"
          
        },
        body: JSON.stringify({
        
          "name": inputName,
          "inputEmail": inputEmail,
          "g-recaptcha-response": token
        })
      }).then(res => res.json()).then(res => {
        isCaptchaValid(true);
        setLoading(false);
        setResponse(res);
      });
    }
This is the error:
<html>
<body>
<!--StartFragment-->

  | Promise.then (async) |   |  
-- | -- | -- | --
  | submitData | @ | form.js:92
  | (anonymous) | @ | form.js:73
  | Promise.then (async) |   |  
  | then | @ | recaptcha__fr.js:172
  | (anonymous) | @ | form.js:72
  | setTimeout (async) |   |  
  | (anonymous) | @ | recaptcha__fr.js:137
  | (anonymous) | @ | recaptcha__fr.js:28
  | handleOnClick | @ | form.js:71
  | callCallback | @ | react-dom.development.js:4111
  | invokeGuardedCallbackDev | @ | react-dom.development.js:4160
  | invokeGuardedCallback | @ | react-dom.development.js:4222
  | invokeGuardedCallbackAndCatchFirstError | @ | react-dom.development.js:4237
  | executeDispatch | @ | react-dom.development.js:9066
  | processDispatchQueueItemsInOrder | @ | react-dom.development.js:9098
  | processDispatchQueue | @ | react-dom.development.js:9111
  | dispatchEventsForPlugins | @ | react-dom.development.js:9122
  | (anonymous) | @ | react-dom.development.js:9314
  | batchedUpdates$1 | @ | react-dom.development.js:25909
  | batchedUpdates | @ | react-dom.development.js:3937
  | dispatchEventForPluginEventSystem | @ | react-dom.development.js:9313
  | dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay | @ | react-dom.development.js:6489
  | dispatchEvent | @ | react-dom.development.js:6481
  | dispatchDiscreteEvent | @ | react-dom.development.js:6454

<!--EndFragment-->
</body>
</html>

@cluemediator
Copy link
Owner

In the code, http://localhost:4000/verify is the endpoint of the backend service. The backend API is required to verify the captcha. Please have a look.

https://www.cluemediator.com/how-to-verify-google-recaptcha-v3-response

@Kathou99
Copy link
Author

Kathou99 commented Jul 5, 2022

So I need to run another react server or I can integrate with my react app the server.js?

I used the external Cors

https://github.com/cluemediator/verify-recaptcha-v3-nodejs

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants