ActionCable本地正常但Heroku部署失效 - Rails&React问题求助

我之前在Heroku部署ActionCable聊天功能时，也碰到过一模一样的WebSocket握手404问题，结合你的配置信息，给你几个实用的排查和修复点：

1. 先修正Redis配置的格式错误 #

你的cable.yml里production环境的Redis URL格式明显有问题：

production:
  adapter: redis
  url:redis:MYURL

这里有两个致命问题：

• url:后面必须加空格，否则YAML解析会出错
• Redis URL的协议部分应该是redis://或者rediss://（加密连接），你写的redis:MYURL缺少双斜杠，会导致ActionCable根本连不上Redis，自然无法启动WebSocket服务。

如果是用Heroku Redis的话，推荐直接用环境变量配置，这样更稳妥：

production:
  adapter: redis
  url: <%= ENV.fetch("REDIS_URL") { "redis://localhost:6379/1" } %>
  ssl_params:
    verify_mode: <%= OpenSSL::SSL::VERIFY_NONE %>

（Heroku Redis默认是加密连接，加上ssl_params可以避免证书验证失败的问题）

2. 清理allowed_request_origins的多余斜杠 #

你的production.rb里配置的origins末尾多了斜杠：

config.action_cable.allowed_request_origins = [ 'https://dg-automotive-portal.herokuapp.com/', 'http://dg-automotive-portal.herokuapp.com/' ]

斜杠会导致origin匹配失败，ActionCable会拒绝连接请求。改成下面这样去掉末尾斜杠：

config.action_cable.allowed_request_origins = [ 'https://dg-automotive-portal.herokuapp.com', 'http://dg-automotive-portal.herokuapp.com' ]

另外注意你的Cable服务域名是dg-automotive-portal-rails.herokuapp.com，主应用是另一个域名，跨域场景下origins必须准确包含主应用的域名，这点你方向是对的，就是格式要修正。

3. 别在前端硬编码WebSocket地址 #

你前端代码里硬写了wss://dg-automotive-portal-rails.herokuapp.com/cable，这种硬编码很容易在环境变化时出错。推荐用Rails自带的action_cable_meta_tag来自动传递URL：

首先在你的Rails布局文件里添加这个标签：

<%= action_cable_meta_tag %>

然后前端代码改成这样，自动读取meta标签里的URL：

createSocket() {
  let cable = Cable.createConsumer() // 无需硬写URL，自动读取
  this.chats = cable.subscriptions.create({ channel: 'ChatChannel' }, {
    connected: () => { console.log("connected!") },
    received: (data) => { this.setState({ chatLogs: [...this.state.chatLogs, data] }) },
    create: function(chatContent, datetime, currentUser) {
      this.perform('create', { content: chatContent, time: datetime, user_id: currentUser })
    }
  })
}

这样能确保前端用的URL和Rails配置的config.action_cable.url完全一致，避免域名不匹配的问题。

4. 确认Heroku上已配置Redis服务 #

你说安装了redis gem，但还要确保在Heroku上添加了Redis add-on（比如Heroku Redis）。可以通过Heroku CLI执行：

heroku addons:create heroku-redis:hobby-dev

添加后Heroku会自动设置REDIS_URL环境变量，这样cable.yml里的配置就能正确读取了。

5. 检查ActionCable路由是否在生产环境生效 #

确认你的routes.rb里的mount ActionCable.server => '/cable'没有被包裹在if Rails.env.development?这类条件判断里，要确保生产环境也能挂载这个端点。

6. 查看Heroku日志找具体错误 #

如果上面的步骤都试过还是不行，去看Heroku的实时日志：

heroku logs --tail

日志里会显示Redis连接失败、ActionCable启动报错等具体信息，能帮你快速定位问题。

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