重新验证 Angular CORS 问题答案

【问题标题】：Re-Captcha Angular CORS Issue重新验证 Angular CORS 问题
【发布时间】：2017-11-25 01:04:06
【问题描述】：

我正在使用 Angular 1.x 向 Google 的重新验证码 POST 验证请求，如下所示：

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”标头。因此，Origin 'http://igs.dev' 不允许访问。响应的 HTTP 状态代码为 405。

我在 Stackoverflow 上阅读了多个答案，大多数人似乎建议在 Chrome 中添加一个插件，但这不是我的用户将使用重新验证码来验证联系表单的解决方案。

这是我的服务器配置错误还是我的 Angular 脚本遗漏了什么？我已经确保在我的 re-captcha 帐户中配置了我的域。

【问题讨论】：

标签： angularjs cors

【解决方案1】：

端点https://www.google.com/recaptcha/api/siteverify 是服务器端验证的一部分，而不是客户端。您应该从您的服务器而不是您的客户端（Angular 1.X）访问此端点。

所以流程可能如下所示：

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

此外，在任何情况下，您都不应该将您的秘密存储在客户端。出于服务器到服务器通信的目的，它应该始终在您的服务器端进行维护。

阅读文档here。

【讨论】：

【解决方案2】：

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

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

请参阅此Tuts tutorial，了解数据的实施和流动是如何工作的

【讨论】：

当然有道理，验证请求需要来自服务器而不是客户端。现在工作得很好。