Question

我在google reCaptcha中遇到了一些问题验证码很好，它正常显示，但是当我提交它时，我发送POST请求时出现连接问题

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

这里是错误日志：

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.

这里是我的HTML代码：

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

这是我的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');

                });

            });
        };

我在那里添加了标题，但总是说

否＆＃39;访问控制 - 允许 - 来源＆＃39;标题出现在请求的上资源

有人能帮帮我吗？谢谢

更新

我正在使用Chrome，我在Chrome中使用此插件启用了CORS：

enabled CORS in chrome

现在又给了我一个错误：

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.

我将我的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': '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');

                });

            });
        };

但是这个错误总是显示出来，请帮助我。

Answer 1

您无法使用您的密钥FROM CLIENT验证客户端答案。您必须仅从SERVER端执行此操作。因此，请更改代码以转到您的服务器（WebAPI等），然后从那里执行POST到Google URI。它应该工作。否则进行此检查是没有意义的 - 您正在分享您的密钥......

Answer 2

很多这样的东西真的很混乱。我们看到上面的评论说“不要从客户端验证”。但是，如果你像我一样，你只是想让它在开发中首先工作，而我现在并不真正关心安全性。但是，我没有意识到Chrome比网络服务器更严格！ Chrome将不会让您执行验证Google响应的步骤，而不首先执行以下两项操作：

安装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', '*');，但这是你在设置网络服务器时应用的设置，这与从客户端做请求无关。我一直试图将其应用到我的客户端角度http请求，认为这将是所有最终解决方案。

Answer 3

在我的情况下，我使用reCapchaLib并修复了此错误：https://github.com/google/recaptcha/blob/1.0.0/php/recaptchalib.php

使用此代码PHP：

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

reCaptcha问题：No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上总是显示我甚至在angularJS中添加了标头

更新

3 个答案: