我已经在我的应用程序中集成了隐形reCaptcha,客户端响应即将成为解决图像挑战的一部分 . 然后,我使用下面的代码调用角度函数来验证服务器端的用户响应 . 其中onloginSubmit(token)是成功回调 .
<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没有出现,我使用的登录按钮无法响应 .
在我提到Method as Post的请求时,该方法被覆盖,因为Options和我发送的请求有效负载不存在 . 这是我在网络标签中得到的
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
1 回答
大多数事情都做得很好 . 有一点是要求在您的应用程序中与外部域进行通信,这样您就可以包含HTTP头内容类型,其中包含一个JSONP格式 .