Google reCAPTCHA、405 错误和 CORS 问题

Posted 2023-02-27

【中文标题】Google reCAPTCHA、405 错误和 CORS 问题

【英文标题】：Google reCAPTCHA, 405 error and CORS issue

【发布时间】：2016-08-26 09:44:26

【问题描述】：

我正在使用 AngularJS 并尝试使用 Google 的 reCAPTCHA， 我正在使用“显式呈现 reCAPTCHA 小部件”方法在我的网页上显示 reCAPTCHA，

HTML 代码 -

<script type="text/javascript">
    var onloadCallback = function() 
    
        grecaptcha.render('loginCapcha', 
            'sitekey' : 'someSiteKey',
            'callback' : verifyCallback,
            'theme':'dark'

        );
    ;

    var auth='';
    var verifyCallback = function(response) 
    
       //storing the Google response in a Global js variable auth, to be used in the controller
        auth = response;

        var scope = angular.element(document.getElementById('loginCapcha')).scope();
        scope.auth();
    ;
</script>

<div id="loginCapcha"></div>


<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

到目前为止，我能够实现用户是人类还是机器人所需的功能， 根据我上面的代码，我的代码中有一个名为“verifyCallback”的回调函数， 它将 Google 创建的响应存储，在名为“auth”的全局变量中。 现在，reCAPCHA 的最后一部分是调用 Google API， 使用“https://www.google.com/recaptcha/api/siteverify”作为 URL 并使用 POST 方法，并传递它是由 Google 创建的 Secret Key 和 Response，我在下面的代码中完成了这些操作。

我的控制器 -

_myApp.controller('loginController',['$rootScope','$scope','$http',
 function($rootScope,$scope,$http)

    var verified = '';

    $scope.auth = function()
    
        //Secret key provided by Google
        secret = "someSecretKey";

       /*calling the Google API, passing it the Secretkey and Response,
       to the specified URL, using POST method*/

        var verificationReq = 

            method: 'POST',
            url: 'https://www.google.com/recaptcha/api/siteverify',
            headers: 
                 'Access-Control-Allow-Origin':'*'
             ,
            params:
                secret: secret,
                response: auth
            

        


        $http(verificationReq).then(function(response) 
        
            if(response.data.success==true)
            
                console.log("Not a Bot");
                verified = true;
            
            else
            
                console.log("Bot or some problem");
            

        , function() 
           // do on response failure
        );
    

所以，我实际面临的问题是我无法访问 Google 的 URL， 以下是我发送的请求和错误的屏幕截图。

已提出请求 -

错误响应 -

据我了解，这与 CORS 和预检请求有关。那么我做错了什么？我该如何解决这个问题？

【问题讨论】：

我在请求中添加了 'Açcess-Control-Allow-Origin' : '*' 作为标题？我错过了什么？请帮忙

所以这必须由服务器端处理？这让我更加困惑，:'(这可以通过我编写的代码在客户端解决吗？

不，这必须在服务器上处理。没有办法解决这个问题。

您不能将秘密放在客户端并从那里创建请求。这会违反安全性。

哦，好的，所以我应该从服务器端脚本发出请求，而不是从客户端尝试？

【参考方案1】：

如谷歌文档中所述https://developers.google.com/recaptcha/docs/verify

本页说明如何验证用户对来自应用后端的 reCAPTCHA 质询的响应。

验证是从服务器而不是客户端启动的。

这是服务器的额外安全步骤，以确保来自客户端的请求是合法的。否则客户端可能会伪造响应，服务器会盲目相信客户端是经过验证的人。