Action Cable 和 AngularJS 跨域集成

Question

我目前有一个 Rails 5 应用程序作为我的后端，我们可以称之为 "Core." 我还有另一个 Rails 5 应用程序作为我的前端，它正在服务在 AngularJS 客户端，我们可以称其为 "Front"。这是两个完全独立的 Rails 5 应用程序，具有完全不同的域。

基本上，我正在尝试通过 Core 集成 Action Cable 并让它与 Front 通信。我在前线使用此服务：https://www.npmjs.com/package/angular-actioncable。至于 Core，那只是基本的 Action Cable 设置。

问题：我在让握手跨两个不同的域工作时遇到了一些问题。我已经阅读了所有可以在网上找到的内容，不幸的是没有太多信息。如果您以前这样做过，请帮忙！

注意：我有 Redis 服务器运行，并且我正在使用单独的端口来模拟开发中的单独域。

核心：

chat_channel.rb

class ChatChannel < ApplicationCable::Channel
  def subscribed
    stream_from 'http://localhost:2000/#/chat'
  end

  def unsubscribed
    stop_all_streams
  end

  def receive(data)
    ActionCable.server.broadcast('http://localhost:2000/#/chat', data)
  end

  def speak
    params.fetch('data').fetch('chat')
  end
end

route.js

mount ActionCable.server => '/cable'

cable.yml

development:
  adapter: redis
  url: redis://localhost:6379

test:
  adapter: async

production:
  adapter: redis
  url: redis://localhost:6379

config/environments.rb

config.action_cable.disable_request_forgery_protection = true

前面：

ChatCtrl.js

app.controller('ChatCtrl', ['$scope', 'ActionCableChannel',
function($scope, ActionCableChannel) {

  $scope.inputText;
  $scope.chatData = [];

  var consumer = new ActionCableChannel("ChatChannel");
  var callback = function(message) {
    $scope.chatData.push(message);
  };

  consumer.subscribe(callback).then(function() {
    $scope.sendToMyChannel = function(message) {
      consumer.send(message, 'speak');
    };
    $scope.$on("$destroy", function() {
      consumer.unsubscribe().then(function() {
        $scope.sendToMyChannel = undefined;
      });
    });
  });

}
]);


// Action Cable Configuration
app.run(function (ActionCableConfig) {
  ActionCableConfig.wsUri = 'localhost:4000';
});

控制台中的错误消息：

Answer 1

尝试

ActionCableConfig.wsUri = 'ws://localhost:4000';

Action Cable 和 AngularJS 跨域集成

Action Cable and AngularJS Cross Domain Integration

ruby-on-rails

cross-domain

websocket

angularjs

actioncable