Fatal编程技术网
  • javascript/
  • Javascript 带有vue-reCAPTCHA-v3（v1.8.0）的reCAPTCHA v3经常无法通过fetch API进行验证

Javascript 带有vue-reCAPTCHA-v3（v1.8.0）的reCAPTCHA v3经常无法通过fetch API进行验证

javascript vue.js

Javascript 带有vue-reCAPTCHA-v3（v1.8.0）的reCAPTCHA v3经常无法通过fetch API进行验证,javascript,vue.js,recaptcha,Javascript,Vue.js,Recaptcha,在带有节点模块的VueJS应用程序中，vue-recaptcha-v3，recaptcha v3在验证步骤中不断失败。“受reCAPTCHA保护”的横幅会像应该的那样出现在页面上，我在验证步骤之前得到的响应很好。当我尝试POSTtoken到https://www.google.com/recaptcha/api/siteverify通过获取： // Execute reCAPTCHA with action "login". const response = await this.$recapt

在带有节点模块的VueJS应用程序中，
vue-recaptcha-v3
，recaptcha v3在验证步骤中不断失败。“受reCAPTCHA保护”的横幅会像应该的那样出现在页面上，我在验证步骤之前得到的响应很好。当我尝试
POST
token到
https://www.google.com/recaptcha/api/siteverify
通过
获取
：


// Execute reCAPTCHA with action "login".
const response = await this.$recaptcha('contact');
const data = {
    secret: secretKey,
    response,
};

try {
    const validationResponse = await fetch(validationUrl, {
        method: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    });
[...]


我只是阻止了错误
跨源请求：同源策略不允许读取远程资源https://www.google.com/recaptcha/api/siteverify. （原因：缺少CORS标题“访问控制允许原点”。

因此我使用
模式：“无cors”
：


[...]
const validationResponse = await fetch(validationUrl, {
    method: 'POST',
    mode: 'no-cors',
    headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify(data),
});
[...]


这就导致了这种反应：


{
  "success": false,
  "error-codes": [
    "missing-input-response",
    "missing-input-secret"
  ]
}


我假设您不能在
no cors
模式（）中发送json的内容类型，因此我使用
multipart/form data
作为内容类型：


const response = await this.$recaptcha('contact');
const formData = new FormData();
formData.append('secret', secret_key);
formData.append('response', response);

try {
    const validationResponse = await fetch(validationUrl, {
        method: 'POST',
        mode: 'no-cors',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'multipart/form-data',
        },
        body: formData,
    });
[...]


但这只会导致谷歌的回应：


<HTML>
<HEAD>
<TITLE>Bad Request</TITLE>
</HEAD>
<BODY BGCOLOR="#FFFFFF" TEXT="#000000">
<H1>Bad Request</H1>
<H2>Error 400</H2>
</BODY>
</HTML>




错误的请求
错误的请求
错误400



我真的不知道该怎么办了-我还缺少什么？
好吧，我终于在StackOverflow找到了答案：-长话短说：谷歌的reCAPTCHA验证服务器似乎只接受
“内容类型”：“application/x-www-form-urlencoded”
，所以在我的案例中发送的数据需要


body:'secret='+secretKey+'&response='+response

使用这些设置不会发生错误（请注意：像这样发送的数据需要经过消毒vie URLencode！我在本例中遗漏了这一点。）
但仍然令人困惑的是，例如Firefox显示了来自Google的正确响应，但Vue应用程序根本无法读取它-response.ok euqals false

原因：浏览器/客户端无法自行处理
无cors
响应。服务器必须这样做！因此，reCAPTCHA响应必须发送到您的服务器，服务器（例如PHP）必须将数据发送到Google的验证脚本。没有别的办法了。Google reCAPTCHA的文档遗漏了所有这些要点

此外，让我自己感到羞愧的是，我现在才意识到这一点，这完全是有道理的，因为对于reCAPTCHA验证，您需要您的secretreCAPTCHA密钥，并且该密钥绝对不应该存储在发送给客户端的JS应用程序中。你从不泄露你的秘密