Geek Answers Handbook

Problems with reCaptcha: the header "Access-Control-Allow-Origin" is present on the requested resource, it always shows that even I add the header in angularJS

I have some problems in google reCaptcha Caccia is fine, it displays fine, but when I send it, I have connection problems when I send a POST request to

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

here is 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 is 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 headers, but he always says

No header "Access-Control-Allow-Origin" is present in the requested resource

Can someone help me? thank

Update:

I use chrome and I have included CORS in my Chrome using this addon:

enabled CORS in chrome

and now it gives 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 will change my controller.js to 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');

                });

            });
        };

, , .

+3
3

. SERVER. , , , (WebAPI ..), POST URI Google. . - ...

+1

. , , : " ". , , . , Chrome , -! Chrome . , Google, 2 :

  • CORS chrome
  • this.headers.append('Content-Type', 'application/x-www-form-urlencoded'); . ( , angular2)

, , Chrome CORS, , . , , -, Google, .

P.S. , , , this.headers.append('Access-Control-Allow-Origin', '*');, , -, . angular http-, , be-all-end-all.

+1

In my case, I am using reCapchaLib and this error has been fixed: https://github.com/google/recaptcha/blob/1.0.0/php/recaptchalib.php

And use this PHP code:

<?php
error_reporting(E_ALL ^ E_NOTICE);  //variables not declared warning off

// tu clave secreta
$secret = "xxxxxx";   //get from https://www.google.com/recaptcha/
// tu site key
$sitekey = "xxxxxxx";  //get from https://www.google.com/recaptcha/


require_once "recaptchalib.php";

$response = null; 
$reCaptcha = new ReCaptcha($secret);


if (strtoupper($_SERVER['REQUEST_METHOD']) == 'POST') {
    if ($_POST["g-recaptcha-response"]) {
            $response = $reCaptcha->verifyResponse(
            $_SERVER["REMOTE_ADDR"],
            $_POST["g-recaptcha-response"]
        );
    }

    echo "<h2>Valores del formulario</h2>";

    if (isset($_POST["nombre"])){
        $nombre = $_POST["nombre"];
        echo "<p>nombre: $nombre</p>";  
    }

    if ($response != null && $response->success) {
        echo "<font color='blue'>Captcha Ok!</font>";
    }
    else
        echo "<font color='red'>Error en Captcha!</font>";
}


?>

<!DOCTYPE html>
<html lang="es">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="language" content="es">

    <title>Test Capcha</title>

    <!-- reCAPTCHA Script -->
    <script src='https://www.google.com/recaptcha/api.js'></script>

</head>

<body >

<div class="container">
    <div class="row">
        <div class="col-lg-12 text-center">
            <h2 class="section-heading">Test reCAPTCHA con formulario Post y PHP</h2>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-12">
            <form name="sentMessage" id="contactForm" novalidate method="POST" action="?">
                <div class="row">
                    <div class="col-md-6">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Nombre *" id="nombre" name="nombre" required data-validation-required-message="Ingrese nombre">
                            <p class="help-block text-danger"></p>
                        </div>

                        <div class="clearfix"></div>
                        <div class="col-lg-12 text-center">
                            <div id="success"></div>
                            <center><div class="g-recaptcha" data-sitekey="<?php echo $sitekey; ?>"></div><br></center>
                            <button type="submit" class="btn btn-xl">Enviar Mensaje</button>
                        </div>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>

<script   src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
</body>
</html>
0
source

More articles:


All Articles