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

Question

我是一名前端开发人员，试图创建一个在我的反应应用程序中添加 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();

    }
  

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

Answer 1

由于他们的 CORS 政策，Google 不允许您从前端调用“https://www.google.com/recaptcha/api/siteverify”。 有关 CORS 的更多信息，请参阅Mozilla 的 CORS 指南。 只能从后端发起调用，而不能从浏览器发起调用。