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

Question

i have some issues in google reCaptcha The captcha is fine, it's show normally, but when I submit it, I have connection issues when I send a POST request to

https://www.google.com/recaptcha/api/verify

here the error log:

XMLHttpRequest cannot load https://www.google.com/recaptcha/api/verify. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3002' is therefore not allowed access. The response had HTTP status code 405.

here my html code:

<div class="form-group" style="margin-bottom: 20px;">
    <div class="text-center center-block">
      <div class="text-center center-block" vc-recaptcha
      tabindex="3"
      theme="white"
      key="model.key"
      lang="en"
           </div>
    <button class="btn" ng-click="submit()">Submit</button>
  </div>
</div>

And this is my controller.js

 $scope.model = {
            key: //THIS IS MY PUBLIC KEY
        };
 $scope.submit = function() {

            var valid;
            var ip;
            $http.jsonp('http://ipinfo.io/?callback=JSON_CALLBACK')
                    .success(function(data) {
                        console.log("stateChangeStart ip = " + data.ip);
                        ip = data.ip;
                    }).then(function() {
                $http({
                    method: 'POST',
                    headers: {
                        'Access-Control-Allow-Origin': '*',
                        'Access-Control-Allow-Methods': 'POST'
                    },
                    url: 'https://www.google.com/recaptcha/api/verify',
                    data: {
                        'privatekey': /* THIS IS MY PRIVATE KEY */,
                        'remoteip': ip,
                        'challenge': vcRecaptchaService.data().challenge,
                        'response': vcRecaptchaService.data().response
                    }

                }).success(function(result, status) {
                    console.log('it work');

                }).error(function(data, status, headers, config) {
                    console.log('error');

                });

            });
        };

I have add headers there, but it always says

No 'Access-Control-Allow-Origin' header is present on the requested resource

can somebody help me? thank you

Update:

I am using chrome and I have enabled CORS in my Chrome with this addon :

enabled CORS in chrome

and now it give me another error:

XMLHttpRequest cannot load https://www.google.com/recaptcha/api/verify. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost:3002' is therefore not allowed access. 

and i change my controller.js into this:

 $scope.model = {
            key: //THIS IS MY PUBLIC KEY
        };
 $scope.submit = function() {

            var valid;
            var ip;
            $http.jsonp('http://ipinfo.io/?callback=JSON_CALLBACK')
                    .success(function(data) {
                        console.log("stateChangeStart ip = " + data.ip);
                        ip = data.ip;
                    }).then(function() {
                $http({
                    method: 'POST',
                    headers: {
                        'Access-Control-Allow-Origin': 'http://localhost:3002',
                        'Access-Control-Allow-Methods': 'POST, GET, OPTIONS'
                    },
                    url: 'https://www.google.com/recaptcha/api/verify',
                    data: {
                        'privatekey': /* THIS IS MY PRIVATE KEY */,
                        'remoteip': ip,
                        'challenge': vcRecaptchaService.data().challenge,
                        'response': vcRecaptchaService.data().response
                    }

                }).success(function(result, status) {
                    console.log('it work');

                }).error(function(data, status, headers, config) {
                    console.log('error');

                });

            });
        };

but that error is always shows, please help me.

Answer 1

A lot of this stuff is really confusing. We see comments like above that say, "don't validate from client". But if you were like me you were just trying to get it to work first in development and I didn't really care about security at this point. But, I didn't realize that Chrome is more strict than a web server! Chrome will flat out NOT let you do the step that validates the response from Google without doing 2 things first:

1. Install CORS chrome plugin
2. add this.headers.append('Content-Type', 'application/x-www-form-urlencoded'); to the headers before sending the post. (at least in angular2)

Obviously afterwards you can't expect all your users to install the Chrome CORS extension plus you don't want to store your secret in the client, that is REALLY BAD. So after you get it working in development, you need to setup a small webserver that will accept this request from your client and forward it to Google, then send the response back to your client.

P.S. other stuff that confused me were people saying to add this.headers.append('Access-Control-Allow-Origin', '*'); but this is a setting you apply when you are setting up a webserver, this has nothing to do with doing requests from a client. I kept trying to apply that to my client side angular http request thinking this would be the be-all-end-all fix.