CODEWITHSUNDEEP
jquerycorsrecaptcha
dip
dip

Reputation: 1261

'Access-Control-Allow-Origin' error in recaptcha call

I am implementing recaptcha in my angularJS register form. But I am getting error as **"XMLHttpRequest cannot load https://www.google.com/recaptcha/api/verify. No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have used https://github.com/VividCortex/angular-recaptcha for recaptcha.

My code is as follows.

<head>
    <script>
            var app = angular.module('testApp', ['vcRecaptcha']);

            app.controller('testCtrl', function ($scope, vcRecaptchaService) {
                console.log("this is your app's controller");

                $scope.model = {
                    key: ' -- public key--'
                };

                $scope.submit = function () {
                    var valid;
                    console.log('Submit button');
                    var challenge =  $('#recaptcha_challenge_field').val();
                    var response =  $('#recaptcha_response_field').val();
                    console.log('challenge' + challenge );
                    $.ajax({
                    url: "https://www.google.com/recaptcha/api/verify",
                    type: 'POST',       
                    data: {
                        privatekey  : '--my private key --',
                        remoteip : '--my ip--',
                        challenge : challenge,
                        response : response,
                    },
                    success: function(data){
                        console.log(" success " + data);
                    },
                    error:function(){
                           console.log(" error occured ");
                    }
                      }); 
                   }
                };
            });
        </script>

    </head>
    <body>
    <div class="container" ng-app="testApp" ng-controller="testCtrl">

        <h1>VividCortex reCaptcha Directive Example</h1>


        <form>
            <div
                vc-recaptcha
                tabindex="3"
                theme="clean"
                key="model.key"
            ></div>

            <!-- Call a method in the scope of your controller to handle data submit -->
            <button class="btn" ng-click="submit()">Submit</button>
        </form>

    </div>
    </body>

Upvotes: 1

Views: 5832

Answers (2)

Hernaldo Gonzalez
Hernaldo Gonzalez

Reputation: 2046

In this post I write my solution with an example: I use the reCaptchaLib.php (https://github.com/google/recaptcha/blob/1.0.0/php/recaptchalib.php)

reCaptcha issues : No 'Access-Control-Allow-Origin' header is present on the requested resource always shows even I have add header in angularJS

Upvotes: 0

NicolasMoise
NicolasMoise

Reputation: 7279

You are getting this error because the resource that you are trying to access (https://www.google.com/recaptcha/api/verify) does not allow requests from browsers (which is what you're doing using Angular).

Most likely you have to make the http call from another server, but that depends on the API's specs.

More on the header:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Access-Control-Allow-Origin

Upvotes: 1

Related Questions