reCAPTCHA Cookie跨子域传递失败及SameSite配置问题咨询

核心问题拆解 #

你遇到的问题是三个规则叠加导致的：

• recaptcha-ca-e Cookie的domain被设为子域app.sunsetland.com.au，而非你配置的顶级域，导致其他子域无法共享
• SameSite=strict的严格限制，让跨子域请求时浏览器拒绝携带Cookie
• reCAPTCHA的初始化配置没跟上控制台设置的顶级域规则

1. 修复Cookie Domain不生效的问题 #

你在reCAPTCHA Enterprise控制台配了顶级域sunsetland.com.au，但实际生成的Cookie用了app.sunsetland.com.au——原因是reCAPTCHA默认会自动检测当前页面的域名作为Cookie的domain，不会主动读取控制台的配置。

解决办法是在初始化reCAPTCHA的代码里，显式指定domain参数：

grecaptcha.enterprise.render('your-recaptcha-element-id', {
  sitekey: '你的站点密钥',
  domain: 'sunsetland.com.au',
  // 其他必要参数...
});

注意：sunsetland.com.au是合法的父域（.com.au属于公共后缀，浏览器允许将Cookie绑定到这个级别），设置后所有子域（app.、subdomain.）都能共享这个Cookie。

2. 调整SameSite属性解决跨域Cookie携带问题 #

SameSite=strict的规则是：只有当请求的发起页面和目标页面完全同域时，Cookie才会被携带。你现在是subdomain.sunsetland.com.au发起请求到app.sunsetland.com.au，属于跨子域，Strict模式下浏览器肯定不会带Cookie。

至于为什么reCAPTCHA会设成Strict，大概率是因为你初始化时没指定sameSite参数，reCAPTCHA在部分场景下会默认用Strict。

根据你的嵌入场景，推荐改成Lax（如果是更复杂的跨域场景，比如跨协议，才需要None，但None必须配合Secure属性，且网站必须走HTTPS）：

grecaptcha.enterprise.render('your-recaptcha-element-id', {
  sitekey: '你的站点密钥',
  domain: 'sunsetland.com.au',
  sameSite: 'Lax',
  // 如果用SameSite=None，必须加下面这行
  // secure: true,
  // 其他必要参数...
});

3. 补充CORS配置确保跨域请求能携带Cookie #

即使Cookie的属性都配置正确，后端的CORS规则也得跟上：

• 后端app.sunsetland.com.au/service的响应头必须包含：
  • Access-Control-Allow-Origin: https://subdomain.sunsetland.com.au（不能用*，否则浏览器会拒绝携带Cookie）
  • Access-Control-Allow-Credentials: true
• 前端发起请求时，要明确设置携带凭证：

// fetch请求示例
fetch('https://app.sunsetland.com.au/service', {
  method: 'POST',
  credentials: 'include',
  // 其他请求参数...
});

验证步骤 #

1. 先清掉浏览器里旧的recaptcha-ca-e Cookie，避免缓存干扰
2. 重新加载登录页，在开发者工具的Application -> Cookies里确认：Cookie的domain是sunsetland.com.au，SameSite是Lax
3. 触发子域的跨域请求，在Network面板查看请求头，确认Cookie字段包含recaptcha-ca-e
4. 检查后端返回是否通过reCAPTCHA验证

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