reCaptcha问题:请求的资源上没有'Access-Control-Allow-Origin'标头,即使我在angularJS中添加了标题,也始终显示

Question

我在谷歌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');

                });

            });
        };

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

请求的资源上不存在"Access-Control-Allow-Origin"标头

有人能帮助我吗？谢谢

更新:

我正在使用chrome,我在Chrome中使用此插件启用了CORS:

启用了chrome中的CORS

现在它给了我另一个错误:

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

您无法使用来自CLIENT的密钥来验证客户端的答案。您只能从服务器端执行此操作。因此，请更改代码以转到您的服务器（WebAPI等），然后从此处进行POST到Google URI。它应该工作。否则，进行此检查没有任何意义-您正在共享密钥...

Answer 2

很多这样的东西确实令人困惑。我们看到上面的评论说“不要从客户那里验证”。但是，如果您像我一样，您只是在尝试使其首先在开发中工作，而此时我并不十分在意安全性。但是，我没有意识到Chrome比网络服务器更严格！Chrome会坚决禁止您先执行以下两项操作来验证来自Google的响应：

1. 安装CORS Chrome插件
2. this.headers.append('Content-Type', 'application/x-www-form-urlencoded');在发送帖子之前添加到标题中。（至少在angular2中）

显然，之后，您将无法指望所有用户都安装Chrome CORS扩展程序，而且您也不想将您的机密存储在客户端中，这确实很糟糕。因此，在开发中使用它之后，您需要设置一个小型Web服务器，该服务器将接受来自客户端的请求并将其转发给Google，然后将响应发送回客户端。

PS其他让我感到困惑的东西是人们说要添加的，this.headers.append('Access-Control-Allow-Origin', '*');但这是您在设置Web服务器时应用的设置，这与处理来自客户端的请求无关。我一直试图将其应用于我的客户端有角度的http请求，以为这将是最终解决方案。