Rails 5 Action Cable对接Angular 4 NG2 Cable失败：WebSocket握手缺Connection头求助

这个错误是WebSocket握手环节的典型问题，前端ng2-cable的请求配置、后端Action Cable的设置，甚至服务器代理层都可能是诱因。我帮你梳理几个具体的排查和解决步骤：

1. 检查ng2-cable的请求头配置 #

WebSocket握手必须携带Connection: Upgrade和Upgrade: websocket这两个核心请求头，ng2-cable默认可能没正确设置这些。你可以在初始化Cable时手动添加：

import { Ng2Cable, Broadcaster } from 'ng2-cable';

@Component({ /* 组件配置 */ })
export class YourComponent {
  constructor(private ng2Cable: Ng2Cable) {
    // 初始化时指定自定义请求头
    this.ng2Cable.setCable('ws://ec2-xxx-yyy-53-1ss.eu-west-2.compute.amazonaws.com/cable', {
      headers: {
        'Connection': 'Upgrade',
        'Upgrade': 'websocket',
        // 如果需要身份验证，这里也可以加上Authorization头
        // 'Authorization': `Bearer ${yourToken}`
      }
    });
  }
}

保存后重新构建前端，看看是否能正常握手。

2. 验证Action Cable的CORS与跨域配置 #

如果你的前端和后端不在同一个域名下，跨域配置会影响请求头的传递：

• 首先在config/environments/production.rb（或对应环境配置文件）里确保Action Cable允许正确的来源：

  Rails.application.config.action_cable.mount_path = '/cable'
  Rails.application.config.action_cable.allowed_request_origins = ['http://你的前端域名'] # 替换为实际前端地址
  Rails.application.config.action_cable.disable_request_forgery_protection = true # 开发环境可临时开启，生产环境建议结合身份验证调整
  

• 然后检查config/initializers/cors.rb的rack-cors配置，确保允许自定义头和凭证：

  Rails.application.config.middleware.insert_before 0, Rack::Cors do
    allow do
      origins 'http://你的前端域名'
      resource '*',
        headers: :any,
        methods: [:get, :post, :put, :patch, :delete, :options, :head],
        credentials: true
    end
  end
  

修改后重启Rails服务器，让配置生效。

3. 排查服务器代理/负载均衡的配置 #

如果你的EC2实例前面有Nginx或者ELB（弹性负载均衡），这些中间层可能会丢失WebSocket相关的请求头：

• Nginx代理配置：如果用Nginx反向代理Action Cable，必须添加WebSocket支持的配置：

  location /cable {
    proxy_pass http://localhost:3000/cable; # 指向你的Rails服务地址
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
  

• ELB配置：确保你的ELB监听的是HTTP/1.1协议，并且在目标组的属性里开启“WebSocket”支持，同时确保负载均衡不会过滤Upgrade和Connection头。

4. 用curl测试基础握手 #

你可以先用curl命令直接测试服务器端的WebSocket握手是否正常，排除前端问题：

curl -i -N -H "Connection: Upgrade" -H "Upgrade: websocket" -H "Sec-WebSocket-Version: 13" -H "Sec-WebSocket-Key: randomtestkey" ws://ec2-xxx-yyy-53-1ss.eu-west-2.compute.amazonaws.com/cable

如果返回HTTP/1.1 101 Switching Protocols，说明服务器端没问题，问题肯定在前端ng2-cable的配置；如果还是报错，那继续排查服务器端的Action Cable或代理配置。

内容的提问来源于stack exchange，提问作者urjit on rails