部署Rails后端到Heroku后HttpOnly Cookie会话失效求助

你的问题核心是跨域场景下HttpOnly会话Cookie无法正确传递和存储，前端localhost与后端Heroku属于不同域名，需要调整Rails的Cookie配置、CORS规则，同时配合前端请求设置来解决。

1. 修改session_store.rb #

替换原有配置为环境区分版本，确保生产环境（Heroku）的Cookie属性符合跨域要求：

Rails.application.config.session_store :cookie_store, 
  key: "_web_forum",
  domain: {
    production: ".herokuapp.com", # 适配Heroku二级域名，确保Cookie在你的App域名下生效
    development: :all # 开发环境保持默认即可
  },
  secure: Rails.env.production?, # 生产环境强制HTTPS传输Cookie（Heroku默认用HTTPS）
  same_site: :none, # 跨域请求必须设置为:None，否则浏览器会拦截Cookie
  httponly: true # 保留HttpOnly属性，提升安全性

• domain: ".herokuapp.com"：让Cookie绑定到Heroku的根域名，适配你的App二级域名（比如my-forum.herokuapp.com）
• secure: true：仅在HTTPS请求中携带Cookie，符合Heroku的环境要求
• same_site: :none：跨域场景下，浏览器需要该属性才会发送Cookie，避免被默认的Lax策略拦截

2. 更新cors.rb #

将你的Heroku域名加入允许的源列表，注意使用HTTPS协议：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "http://localhost:3000", "http://localhost:3001"
    resource "*", 
      headers: :any, 
      methods: [:get, :post, :put, :patch, :delete, :options, :head], 
      credentials: true
  end
  allow do
    origins "https://your-app-name.herokuapp.com" # 替换成你的Heroku实际域名
    resource "*", 
      headers: :any, 
      methods: [:get, :post, :put, :patch, :delete, :options, :head], 
      credentials: true
  end
end

• 必须将Heroku的HTTPS域名加入origins，否则CORS会拒绝跨域请求携带Cookie

3. 前端React请求配置 #

无论使用fetch还是axios，都需要开启携带凭证的选项：

• 用axios的全局配置：

axios.defaults.withCredentials = true;

• 用fetch的请求配置：

fetch('https://your-app-name.herokuapp.com/login', {
  method: 'POST',
  credentials: 'include', // 关键：携带Cookie
  body: JSON.stringify(loginData),
  headers: {
    'Content-Type': 'application/json'
  }
});

验证步骤 #

1. 部署修改后的Rails代码到Heroku：git push heroku main
2. 重启Heroku服务器：heroku restart
3. 前端发起登录请求后，打开浏览器开发者工具（Application → Cookies），检查是否存在_web_forum Cookie，且Domain为.herokuapp.com，Secure、HttpOnly标记为true
4. 跳转页面后，查看后续API请求的Request Headers，确认包含Cookie: _web_forum=xxx

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