在React Native WebView中与Rails持久化会话（Cookie）的问题

针对性配置调整方案 #

1. Rails后端Session Cookie配置修正 #

要让WebView能持久化并读取会话Cookie，后端需调整如下核心配置：

Rails.application.config.session_store :cookie_store, 
                                       key: '_code_session',
                                       domain: Rails.env.production? ? :all : "dev.codedorian.com",
                                       secure: Rails.env.production?,
                                       httponly: false,
                                       same_site: :none,
                                       expires: 1.year.from_now

• 关键说明：
  • httponly: false：必须关闭该属性，否则WebView无法访问Cookie内容
  • same_site: :none：跨域场景下（WebView加载域名与App宿主不同）需设置，生产环境需配合secure: true使用
  • expires：显式设置过期时间，避免Cookie随临时会话销毁

2. React Native WebView组件优化 #

补充必要属性，确保iOS/Android双平台的Cookie持久化：

<WebView
  onMessage={onMessage}
  ref={webViewRef}
  source={{uri: CODE_URL}}
  sharedCookiesEnabled={true}
  thirdPartyCookiesEnabled={true}
  persistSession={true}
  onLoadStart={update}
  onLoadEnd={update}
/>

• 关键说明：
  • thirdPartyCookiesEnabled={true}：Android平台特需配置，开启第三方Cookie支持
  • persistSession={true}：确保WebView重启后恢复会话状态
  • 精简update事件到必要的两个回调即可，避免冗余

3. 平台额外配置 #

• iOS：确保Info.plist中配置了正确的网络权限，WebView加载域名未被隐私拦截
• Android：在AndroidManifest.xml中添加网络权限，开发环境需开启明文流量（若用HTTP）：

  <application
    ...
    android:usesCleartextTraffic="true">
  </application>
  

验证方法 #

登录后关闭App，重新打开WebView，检查后端session[:user_id]是否存在，或直接查看WebView页面是否处于登录状态。

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