Flutter Web集成Recaptcha v3调用siteverify接口遭CORS策略拦截

你在reCAPTCHA后台添加localhost域名的配置，仅作用于前端加载reCAPTCHA脚本、生成校验token的环节，和siteverify接口的跨域权限完全无关。
Google的https://www.google.com/recaptcha/api/siteverify接口从设计上就不支持浏览器端直接调用，服务端不会返回Access-Control-Allow-Origin响应头，不管你在后台怎么配置域名，前端直接请求都会触发CORS报错。另外这个接口调用需要传入你在reCAPTCHA后台获取的secret密钥，secret密钥属于敏感凭证，绝对不能硬编码在Flutter Web前端代码中，否则会被他人盗用绕过校验。

• 生产环境必须走服务端中转流程，禁止前端直接请求siteverify接口：
  1. Flutter Web端正常加载reCAPTCHA v3脚本，执行前端逻辑获取用户行为生成的校验token
  2. 前端将拿到的token提交到你自己的业务后端接口
  3. 由你的后端服务携带secret密钥、前端上传的token、用户端IP，向Google的siteverify接口发起校验请求
  4. 后端拿到校验结果（包括风险评分、是否判定为真人）后，将最终结果返回给Flutter Web端
• 本地开发阶段临时调试可以用以下两种方案（仅允许开发环境使用，禁止上线）：
  • 给Flutter Web开发服务配置代理转发：将指向siteverify接口的请求路径转发到Google官方地址，通过同域请求绕过浏览器CORS限制
  • 本地调试时启动浏览器添加关闭安全策略的参数，比如Chrome启动时加--disable-web-security --user-data-dir=/tmp/chrome_dev参数，直接绕过浏览器CORS校验，注意这种方式下加载的浏览器实例不要用来做日常上网操作，避免安全风险

内容的提问来源于stack exchange，提问作者ali