Rails7+React18分离部署应用跨站Cookie无法设置问题

核心问题分析 #

你看到响应头里的Set-Cookie但Chrome未保存Cookie，核心原因有三点：

• secure: true在HTTP环境下无效：Chrome不会在非HTTPS的localhost环境中保存标记为secure的Cookie，而你的开发环境是http://localhost:3000/3001，不满足secure要求。
• Fetch请求未配置凭证参数：跨域请求要携带/保存Cookie，必须显式设置credentials: 'include'，你当前使用的crossDomain: true是过时参数，无法生效。
• domain: :all适配localhost场景异常：Rails的:all在localhost环境下会生成不合适的domain值，导致Cookie无法匹配当前域名。

分步修复方案 #

1. 按环境调整Cookie配置 #

修改设置Cookie的代码，根据开发/生产环境区分参数：

cookies['CSRF-TOKEN'] = {
  value:     form_authenticity_token,
  domain:    Rails.env.development? ? nil : :all, # 开发环境留空，让浏览器自动绑定localhost
  same_site: Rails.env.development? ? :lax : :none,
  secure:    Rails.env.production?
}

• 开发环境：关闭secure，使用SameSite: Lax，不指定domain，适配HTTP的localhost场景
• 生产环境：保留secure: true和SameSite: None，适配HTTPS跨域场景

2. 修正前端Fetch请求参数 #

更新logInUser函数，替换过时参数并添加凭证配置：

export const logInUser = token => {
  const uri = `${backendBaseUri}/sessions`
  const body = JSON.stringify({ token })

  return(
    fetch(uri, { 
      method: 'POST', 
      credentials: 'include', // 关键：告知浏览器处理跨域Cookie
      body, 
      headers: { 'Content-Type': 'application/json' } 
    })
    .then(resp => {
      if (resp.status === 401) throw new AuthorizationError()
      return resp
    })
  )
}

3. 确认CORS配置有效性 #

你的cors.rb配置基本正确，只需确保：

• 开发环境configatron.client_origin确实为http://localhost:3001
• forgery_protection_origin_check = false保持启用，适配跨域场景

验证步骤 #

1. 重启Rails服务器和React开发服务
2. 发起登录请求后，在Chrome开发者工具Application标签 → Cookies → http://localhost:3000下查看是否存在CSRF-TOKEN
3. 后续请求中，需前端从Cookie读取CSRF-TOKEN并设置到X-CSRF-Token请求头中，完成CSRF校验流程

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