AngularJS cross-domain action cable and cross-domain integration

Question

I currently have a Rails 5 application acting as my backend, we can call it the “Core”. I also have another Rails 5 application, acting as my interface, which serves the client side of AngularJS, we can call it "Front". These are two completely different Rails 5 applications with completely different domains.

Basically, I'm trying to integrate Action Cable through Core and talk to Front. I use this service here for Front: https://www.npmjs.com/package/angular-actioncable . As for Core, only the basic Action Cable is configured.

Problem. I'm having trouble getting the handshake to work on two separate domains. I read everything that I can find on the Internet, unfortunately, there is not much information. If you have done this before, please help!

Note. I have a Redis server, and I use separate ports to simulate individual domains in development.

Core:

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

configurations /environments.rb

config.action_cable.disable_request_forgery_protection = true

Front:

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';
});

Error message in console:

Answer 1

Try

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