Невидимая Google ReCaptcha проверка на стороне сервера не удается

Question

Я интегрировал невидимую reCaptcha в свое приложение, и ответ со стороны клиента приходит как часть решения проблемы с изображением. Затем я вызываю угловую функцию для проверки ответа пользователя на стороне сервера, используя приведенный ниже код. где onloginSubmit(токен) - это обратный вызов в случае успеха.

<button id="btnLogin" ng-disabled="loginForm.$invalid" 
                                class="g-recaptcha primarybtn margin-left-zero form-control-input"
                                data-sitekey="{{public_key}}"
                                data-callback='onloginSubmit'>{{'label_login' |
                                translate}}</button>

<script>
   function onloginSubmit(token) {
       angular.element(document.getElementById('loginForm')).scope().verifyReCaptcha(token);
   };
 </script>

в угловом я звоню verifyReCaptcha, как показано ниже.

$scope.public_key = "------ My Site Key -------";
  $scope.private_key = "------ My Secret Key -------";
  $scope.verifyReCaptchaURL = "https://www.google.com/recaptcha/api/siteverify";

$scope.verifyReCaptcha = function(reCaptchaToken){
       var captchaData = {
              secret : $scope.private_key,
              response : reCaptchaToken
      }

      $http({
          headers: {
            'Accept': 'application/json,text/plain',
            'Content-Type': 'application/json;application/x-www-form-urlencoded;charset=utf-8;',
          },
          url: $scope.verifyReCaptchaURL,
          method: 'POST',
          data: captchaData
        }).success(function (data) {
             console.log("success");
             $scope.login();
        }).error(function (data) {
             console.log("error");
             $window.location.reload(true);
        });
  };

когда я нажимаю на сервис API, https://www.google.com/recaptcha/api/siteverify. я получаю ошибку ниже.

Failed to load https://www.google.com/recaptcha/api/siteverify: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access. The response had HTTP status code 405.

я не мог найти больше документации по проблеме.

что я делаю не так, а также, если есть какая-либо ошибка, recaptcha не появляется и кнопка входа в систему, которую я использую, не отвечает.

В запросе я упоминаю метод как сообщение, метод перезаписывается как параметры, а полезная нагрузка запроса, которую я отправляю, отсутствует. это то, что я получил на вкладке сети

Request URL:https://www.google.com/recaptcha/api/siteverify Request Method:OPTIONS Status Code:405 Remote Address:10.120.118.50:8080 Referrer Policy:no-referrer-when-downgrade

Answer 1

Большую часть времени вы проделали отличную работу. Одна вещь, которая требуется в вашем приложении - это общение с внешним доменом, чтобы вы могли включить тип содержимого заголовка HTTP, это включить формат JSONP.

 $http({
      headers: {
        'Accept': 'application/json,text/plain',
        'Content-Type': 'application/jsonp;application/x-www-form-urlencoded;charset=utf-8;',
      },
      url: $scope.verifyReCaptchaURL,
      method: 'POST',
      data: captchaData
    }).success(function (data) {
         console.log("success");
         $scope.login();
    }).error(function (data) {
         console.log("error");
         $window.location.reload(true);
    });