Re-Captcha Angular CORS问题

时间:2017-06-21 23:26:50

标签: angularjs cors

我正在使用Angular 1.x将验证请求发布到Google的重新验证码,如下所示:

var post_data = {  //prepare payload for request
     'secret':'xxxxx',
     'response':fields.myRecaptchaResponse
};

$http.post('https://www.google.com/recaptcha/api/siteverify', post_data)

在我的控制台中,我可以看到以下错误:

XMLHttpRequest无法加载https://www.google.com/recaptcha/api/siteverify。对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。因此,不允许原点“http://igs.dev”访问。响应的HTTP状态代码为405。

我已经在Stackoverflow上阅读了多个答案,大多数似乎都建议在Chrome中添加一个插件,但对于那些将使用重新验证密码验证联系表单的用户来说,这不是一个解决方案。

这是我的服务器配置错误还是我的Angular脚本丢失了什么?我已经确保在我的重新验证码帐户中配置了我的域名。

2 个答案:

答案 0 :(得分:4)

ReCaptcha在服务器端验证,而不是在客户端验证。 CORS错误是由于ReCaptcha API不打算由浏览器使用。

您需要将重新访问数据发送到您的API /服务器,然后通过向ReCaptcha API发送请求来验证它是否正确。当服务器互相发出HTTP请求时,没有CORS限制。

请参阅此Tuts tutorial,了解数据的实施和流程如何运作

答案 1 :(得分:2)

结束点https://www.google.com/recaptcha/api/siteverify是服务器端验证的一部分,而不是客户端。您应该从服务器而不是从客户端(Angular 1.X)命中此端点。

所以流程可能如下所示:

在您的客户端(Angular 1.X),您将在html中加载re-captcha小部件,该小部件将执行验证并将哈希值存储在隐藏的输入字段中,该字段将与您一起发送到您的服务器用户提交表单时的其他表单详细信息。现在,在服务器端,您将点击该端点以验证验证是否成功。

此外,在任何情况下,您都不应该在客户端存储您的秘密。它应始终保留在服务器端,以便进行服务器到服务器通信。

阅读文档here