问题描述
我是一名前端开发人员,正在尝试创建一个在我的 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”标头。
解决方法
由于其 CORS 政策,Google 不允许您从前端调用“https://www.google.com/recaptcha/api/siteverify”。有关 CORS 的详细信息,请参阅 Mozilla's CORS guide。呼叫只能从后端发起,不能从浏览器发起。