Question

我是一名前端开发人员，正在尝试创建一个在我的 React 应用程序中添加 google-recaptcha-v3 的测试用例。我很感激在我发出帖子请求以验证用户的令牌时如何绕过 cors 错误的回复。

//imports
 ... 

const Recaptcha=()=>{
return(
        <div>
            <p>Recaptcha Test</p>
            <button onClick={handleSubmit}>Send Test</button>
        </div>
    )

// handleSubmit function
const handleSubmit =()=>{
        const getToken = async () => {
            await executeRecaptcha('contactpage')
           .then(res=>{ 
               console.log(res);
               return setToken(res);
           });
       }
       getToken();
       console.log(token);

       const verifyToken = async () => {
        console.log(token);
        const article = {
            secret: '*******',
            response: token
        }
        let axiosConfig = {
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                "Access-Control-Allow-Origin": "http://localhost:3000",
            }
        };
        let url = 'https://www.google.com/recaptcha/api/siteverify';
        await axios.post(url, article)
            .then(res => console.log(res))
            .catch(err => console.log(err));
    }
    verifyToken();

    }

然后我在浏览器控制台中收到此错误：从源“http://localhost:3000/”访问“https://www.google.com/recaptcha/api/siteverify”的 XMLHttpRequest 已被 CORS 政策阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

Answer 1

由于其 CORS 政策，Google 不允许您从前端调用“https://www.google.com/recaptcha/api/siteverify”。有关 CORS 的详细信息，请参阅 Mozilla's CORS guide。呼叫只能从后端发起，不能从浏览器发起。

在没有后端的情况下实现 google-recaptcha v3

1 个答案: