Ruby on Rails/React认证异常：Postman正常Localhost会话失效

问题核心 #

本地开发时，React前端（localhost:3006）调用Rails后端的/login接口成功，但后续调用/me接口返回401 Unauthorized，Session未被正确保存。Postman测试正常，但前端无法携带Session Cookie，根源是浏览器对跨域Cookie的限制，以及CORS配置未明确允许凭证携带。

解决方案 #

1. 修改Rails的CORS配置 #

在config/initializers/cors.rb中添加credentials: true，允许跨域请求携带Cookie：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins "http://localhost:3006" # 匹配你的React前端域名和端口

    resource "*",
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head],
      credentials: true # 关键配置：允许跨域请求携带凭证（Cookie）
  end
end

2. 前端Fetch请求添加凭证携带配置 #

所有涉及认证的Fetch请求都要加上credentials: 'include'，确保Cookie被发送到后端：

Login组件中的登录请求：

fetch('http://127.0.0.1:3000/login', {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  credentials: 'include', // 携带Cookie
  body: JSON.stringify(userData)
})

UserContext中的/me请求：

fetch('http://127.0.0.1:3000/me', {
  credentials: 'include' // 携带Cookie
})

3. 验证Session Cookie的Secure配置 #

检查config/initializers/session_store.rb，确保开发环境下Cookie的secure属性为false（因为localhost是HTTP协议，secure: true会导致浏览器拒绝保存Cookie）：

Rails.application.config.session_store :cookie_store, 
  key: '_your_app_session', 
  same_site: :lax, 
  secure: Rails.env.production? # 仅生产环境启用secure

验证步骤 #

1. 重启Rails服务器，确保CORS配置生效
2. 前端登录后，打开浏览器开发者工具 -> Application -> Cookies，检查是否存在_your_app_session Cookie
3. 再次调用/me接口，确认返回200和用户数据

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