Rails API与Vite+React跨端口Session不持久问题排查求助

核心问题：跨域请求下的Cookie/Session传递失败 #

API与前端运行在不同端口属于跨域场景，浏览器默认会限制跨域请求携带Cookie；同时Rails默认的Session Cookie配置不支持跨域传递，导致后续请求无法携带Session信息，最终出现session[:user]为空的情况。

解决步骤 #

1. 配置Rails跨域资源共享（CORS） #

确保rack-cors gem已安装（Rails 7默认已包含，若未安装则在Gemfile添加gem 'rack-cors'后执行bundle install），然后修改config/initializers/cors.rb：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:5173' # 替换为你的React前端实际地址
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head],
      credentials: true # 关键配置：允许请求携带凭证（Cookie）
  end
end

2. 调整Session Cookie的跨域适配配置 #

在config/environments/development.rb（开发环境）或config/application.rb（全局配置）中修改Session相关设置：

# 配置Session存储参数
config.session_store :cookie_store, 
  key: '_interslice_session',
  same_site: :none, # 允许跨域场景下传递Cookie
  secure: Rails.env.production? # 生产环境必须设为true（要求HTTPS），开发环境可临时设为false（Chrome可能需配合本地HTTPS使用）

# 确保Cookie与Session中间件加载顺序正确
config.middleware.use ActionDispatch::Cookies
config.middleware.use ActionDispatch::Session::CookieStore, config.session_options

注：若开发环境浏览器拒绝非HTTPS下的SameSite=None Cookie，可使用工具生成本地HTTPS证书，或临时关闭浏览器的安全限制（仅用于开发调试）。

3. 前端请求明确携带凭证 #

在React的请求代码中，需显式设置携带Cookie：

• 使用fetch时：

fetch('http://localhost:3000/api/check_session', {
  credentials: 'include' // 关键：携带Cookie
})

• 使用axios时：

axios.get('http://localhost:3000/api/check_session', {
  withCredentials: true // 关键：携带Cookie
})

4. 修复密码验证逻辑（安全隐患修复） #

当前登录逻辑直接用明文密码查询用户，既不安全也不符合Rails密码加密规范，需修正：

1. 在User模型中添加密码加密支持：

class User < ApplicationRecord
  has_secure_password
end

2. 确保数据库用户表存在password_digest字段（而非password字段），可通过迁移创建：

rails generate migration AddPasswordDigestToUsers password_digest:string
rails db:migrate

3. 修改登录方法：

def login
  @user = User.find_by(email: params[:user][:email])
  if @user&.authenticate(params[:user][:password]) # 使用authenticate验证加密后的密码
    session[:user] = @user.id
    puts session[:user]
    render json: {error: false, message: 'User Exists', user: @user}, status: 200
  else
    render json: {error: true, message: 'User not found'}, status: 400
  end
end

验证流程 #

1. 重启Rails服务器与Vite前端服务
2. 注册/登录用户后，通过浏览器开发者工具的Application -> Cookies确认_interslice_session Cookie已生成
3. 发起checkSession请求时，查看Network请求头是否包含Cookie: _interslice_session=xxx

内容的提问来源于stack exchange，提问作者Ricardo Hernández