axios/rack-cors/react-rails/heroku：登出报500错误，刷新无持久化求助

针对你遇到的两个问题，我给你梳理下排查和解决的方向：

一、登出时的500内部服务器错误 #

这个问题的核心是服务器端抛出了未捕获的异常，前端的错误栈只能告诉你请求失败，真正的原因得看Heroku的服务器日志：

• 第一步先拉取实时日志：在终端运行 heroku logs --tail，然后触发登出操作，看日志里的具体错误信息，比如常见的：
  • ActionController::InvalidAuthenticityToken：这是CSRF令牌验证失败，Rails默认会拦截没有正确CSRF token的非GET请求。你需要确保axios在发送登出请求时，带上了Rails的CSRF token——可以从页面的meta[name="csrf-token"]标签里获取，然后在axios的请求headers里设置X-CSRF-Token字段。
  • NoMethodError (undefined method 'destroy' for nil:NilClass)：说明你的登出action里调用了current_user.destroy或者类似方法，但current_user是nil，可能是会话已经失效但前端还在触发登出，或者登录状态判断逻辑有问题，需要加nil判断。
  • 数据库相关错误：比如会话记录删除失败，可能是数据库连接问题，或者会话表的权限问题。
• 检查请求方法：Rails的登出路由（比如Devise的destroy_user_session_path）默认是DELETE请求，如果你的axios代码用了GET请求，会触发Rails的路由错误，进而返回500。要确认axios的请求方法是delete，比如：

  axios.delete('/users/sign_out', { headers: { 'X-CSRF-Token': csrfToken } })
  

• 验证CORS配置：虽然集成了rack-cors，但要确保你的配置允许DELETE请求，并且允许携带自定义headers（比如X-CSRF-Token）。示例配置：

  # config/initializers/cors.rb
  Rails.application.config.middleware.insert_before 0, Rack::Cors do
    allow do
      origins '*' # 生产环境建议指定具体域名
      resource '*',
        headers: :any,
        methods: [:get, :post, :put, :patch, :delete, :options, :head]
    end
  end
  

二、页面刷新后状态无持久化 #

SSR应用的客户端状态默认存在内存中，刷新页面后会重置，需要从两个层面解决：

1. 客户端状态持久化 #

把关键状态（比如用户登录信息、token）存在localStorage或sessionStorage里，在客户端初始化时读取并同步到应用状态：

• 比如用React Context或Redux的话，在根组件的useEffect（或componentDidMount）里读取本地存储：

  useEffect(() => {
    const savedUser = localStorage.getItem('currentUser');
    if (savedUser) {
      setUser(JSON.parse(savedUser)); // 同步到Context或Redux
    }
  }, []);
  

• 登录/登出时更新本地存储：登录成功后把用户信息存进去，登出时删除。

2. 服务端渲染时同步初始状态 #

刷新页面时，服务器需要重新获取用户状态（从Rails会话或token），并把初始状态注入到页面中，让客户端hydrate时能复用这个状态：

• 在Rails的controller里，获取当前用户状态，然后传递给ERB模板：

  # app/controllers/home_controller.rb
  def index
    @initial_state = { current_user: current_user.as_json }
  end
  

• 在ERB模板里把初始状态序列化到window对象：

  <!-- app/views/home/index.html.erb -->
  <div id="root"><%= react_component('App', props: @initial_state, prerender: true) %></div>
  <script>
    window.__INITIAL_STATE__ = <%= raw @initial_state.to_json %>;
  </script>
  

• 客户端初始化应用时，用window.__INITIAL_STATE__作为初始状态：

  // app/javascript/packs/application.js
  const initialState = window.__INITIAL_STATE__ || {};
  ReactDOM.hydrateRoot(document.getElementById('root'), <App {...initialState} />);
  

3. 会话存储配置（可选） #

如果你的Rails会话用的是默认的cookie存储，在Heroku上可能会因为cookie大小限制或过期时间设置导致状态丢失，可以改用Redis存储会话：

• 添加redis-rails gem到Gemfile，然后配置：

  # config/initializers/session_store.rb
  Rails.application.config.session_store :redis_store, servers: ENV['REDIS_URL'], expire_after: 1.day
  

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