javascript - Google reCAPTCHA, 405 error and CORS issue - Stack Overflow

admin管理员组

文章数量:1323735

I am using AngularJS and trying to work with Google's reCAPTCHA, I am using the "Explicitly render the reCAPTCHA widget" method for displaying the reCAPTCHA on my web page,

HTML code -

<script type="text/javascript">
    var onloadCallback = function() 
    {
        grecaptcha.render('loginCapcha', {
            'sitekey' : 'someSiteKey',
            'callback' : verifyCallback,
            'theme':'dark'

        });
    };

    var auth='';
    var verifyCallback = function(response) 
    {
       //storing the Google response in a Global js variable auth, to be used in the controller
        auth = response;

        var scope = angular.element(document.getElementById('loginCapcha')).scope();
        scope.auth();
    };
</script>

<div id="loginCapcha"></div>


<script src=".js?onload=onloadCallback&render=explicit" async defer></script>

So far, I am able to achieve the needed functionality of whether the user is a Human or a Bot,
As per my code above, I have a Callback function called 'verifyCallback' in my code,
which is storing the response created by Google, in a global variable called 'auth'.

Now, the final part of reCAPCHA is calling the Google API,
with "" as the URL and using a POST method,
And passing it the Secret Key and the Response created by Google, which I've done in the code below.

My Controller -

_myApp.controller('loginController',['$rootScope','$scope','$http',
 function($rootScope,$scope,$http){

    var verified = '';

    $scope.auth = function()
    {
        //Secret key provided by Google
        secret = "someSecretKey";

       /*calling the Google API, passing it the Secretkey and Response,
       to the specified URL, using POST method*/

        var verificationReq = {

            method: 'POST',
            url: '',
            headers: {
                 'Access-Control-Allow-Origin':'*'
             },
            params:{
                secret: secret,
                response: auth
            }

        }


        $http(verificationReq).then(function(response) 
        {
            if(response.data.success==true)
            {
                console.log("Not a Bot");
                verified = true;
            }
            else
            {
                console.log("Bot or some problem");
            }

        }, function() {
           // do on response failure
        });
    }

So, the Problem I am actually facing is that I am unable to hit the Google's URL,
Following is the screenshot of the request I am sending and the error.

Request made -

Error Response -

As far as I understand it is related to CORS and Preflight request.
So what am I doing wrong? How do I fix this problem?

I am using AngularJS and trying to work with Google's reCAPTCHA, I am using the "Explicitly render the reCAPTCHA widget" method for displaying the reCAPTCHA on my web page,

HTML code -

<script type="text/javascript">
    var onloadCallback = function() 
    {
        grecaptcha.render('loginCapcha', {
            'sitekey' : 'someSiteKey',
            'callback' : verifyCallback,
            'theme':'dark'

        });
    };

    var auth='';
    var verifyCallback = function(response) 
    {
       //storing the Google response in a Global js variable auth, to be used in the controller
        auth = response;

        var scope = angular.element(document.getElementById('loginCapcha')).scope();
        scope.auth();
    };
</script>

<div id="loginCapcha"></div>


<script src="https://www.google./recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

So far, I am able to achieve the needed functionality of whether the user is a Human or a Bot,
As per my code above, I have a Callback function called 'verifyCallback' in my code,
which is storing the response created by Google, in a global variable called 'auth'.

Now, the final part of reCAPCHA is calling the Google API,
with "https://www.google./recaptcha/api/siteverify" as the URL and using a POST method,
And passing it the Secret Key and the Response created by Google, which I've done in the code below.

My Controller -

_myApp.controller('loginController',['$rootScope','$scope','$http',
 function($rootScope,$scope,$http){

    var verified = '';

    $scope.auth = function()
    {
        //Secret key provided by Google
        secret = "someSecretKey";

       /*calling the Google API, passing it the Secretkey and Response,
       to the specified URL, using POST method*/

        var verificationReq = {

            method: 'POST',
            url: 'https://www.google./recaptcha/api/siteverify',
            headers: {
                 'Access-Control-Allow-Origin':'*'
             },
            params:{
                secret: secret,
                response: auth
            }

        }


        $http(verificationReq).then(function(response) 
        {
            if(response.data.success==true)
            {
                console.log("Not a Bot");
                verified = true;
            }
            else
            {
                console.log("Bot or some problem");
            }

        }, function() {
           // do on response failure
        });
    }

So, the Problem I am actually facing is that I am unable to hit the Google's URL,
Following is the screenshot of the request I am sending and the error.

Request made -

Error Response -

As far as I understand it is related to CORS and Preflight request.
So what am I doing wrong? How do I fix this problem?

• javascript
• angularjs
• cors
• recaptcha
• preflight

Share Improve this question Follow edited Nov 19, 2019 at 5:52 sideshowbarker♦ 88.4k2929 gold badges215215 silver badges212212 bronze badges asked May 1, 2016 at 15:55 Dev1ceDev1ce 5,9542424 gold badges9898 silver badges160160 bronze badges 6

• I added 'Açcess-Control-Allow-Origin' : '*' , as header in my request? What am I missing ? Please help – Dev1ce Commented May 1, 2016 at 16:00
• So this has to handled by serverside? It's confusing me more, :'( Can this be solved on Client side through the code I've written? – Dev1ce Commented May 1, 2016 at 16:16
• No, this has to be handled on the server. There is no way around that. – marvinhagemeister Commented May 1, 2016 at 16:21
• 2 You can't put the secret at the client and create requests from there. That would be against the security. – Wiktor Zychla Commented May 1, 2016 at 16:22
• Oh ok, so I should make the request from a server side script, instead of what I was trying from Client side? – Dev1ce Commented May 1, 2016 at 16:24

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 7

As stated in google's docs https://developers.google./recaptcha/docs/verify

This page explains how to verify a user's response to a reCAPTCHA challenge from your application's backend.

Verification is initiated from the server, not the client.

This is an extra security step for the server to ensure requests ing from clients are legitimate. Otherwise a client could fake a response and the server would be blindly trusting that the client is a verified human.

If you get a cors error when trying to sign in with recaptcha, it could be that your backend server deployment is down.

本文标签： javascriptGoogle reCAPTCHA405 error and CORS issueStack Overflow