'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>

回答1:

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.

回答2:

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

来源：https://stackoverflow.com/questions/23871555/access-control-allow-origin-error-in-recaptcha-call

标签

jquery

recaptcha