在沒有后端的情況下實現 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 指南。 只能從后端發起調用，而不能從瀏覽器發起調用。