如何将React Native前端的Cookie附加到@rails/actioncable WebSocket连接？

• 第一步：获取已设置的Cookie
  用react-native-cookies库拿到目标域名下的目标Cookie：

import CookieManager from '@react-native-cookies/cookies';

// 替换成你的Rails API域名
const cookies = await CookieManager.get('https://your-rails-api-domain.com');
// 替换成实际的Cookie名称，比如Rails默认的_session_id或自定义认证Cookie
const targetCookie = cookies['_your_app_session'];

• 第二步：手动给ActionCable连接注入Cookie
  ActionCable不会自动携带Cookie，必须在创建consumer时手动传递，有两种可行方式：

方式一：通过请求头传递（推荐，安全性更高） #

import { createConsumer } from '@rails/actioncable';

const cableUrl = 'wss://your-rails-api-domain.com/cable';
const consumer = createConsumer({
  url: cableUrl,
  headers: {
    // 按HTTP Cookie标准格式拼接后放入请求头
    Cookie: `${targetCookie.name}=${targetCookie.value}`
  }
});

方式二：通过URL查询参数传递（适配部分RN环境） #

如果你的RN版本对WebSocket自定义请求头支持有限，可以把Cookie值拼到连接URL里：

import { createConsumer } from '@rails/actioncable';

const cableUrl = `wss://your-rails-api-domain.com/cable?${targetCookie.name}=${targetCookie.value}`;
const consumer = createConsumer(cableUrl);

这种方式需要后端从params中提取Cookie值完成认证逻辑。

• 第三步：Rails后端适配配置
  确保ActionCable能处理带Cookie的WebSocket请求：

1. 在config/initializers/action_cable.rb中配置允许的请求源：

Rails.application.config.action_cable.allowed_request_origins = ['https://your-app-domain.com'] # 开发环境可设为:all
Rails.application.config.action_cable.mount_path = '/cable'

2. 若用请求头传Cookie，后端会自动识别并复用普通HTTP请求的会话逻辑；若用查询参数，需在ActionCable连接类里手动提取验证：

# app/channels/application_cable/connection.rb
module ApplicationCable
  class Connection < ActionCable::Connection::Base
    identified_by :current_user

    def connect
      self.current_user = find_verified_user
    end

    private
      def find_verified_user
        # 从查询参数提取Cookie值并验证会话
        if session = Session.find_by(id: request.params['_your_app_session'])
          session.user
        else
          reject_unauthorized_connection
        end
      end
  end
end

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