Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Error: CrossStorageClient could not connect #43

Open
siulca opened this issue Sep 20, 2017 · 16 comments
Open

Error: CrossStorageClient could not connect #43

siulca opened this issue Sep 20, 2017 · 16 comments

Comments

@siulca
Copy link

siulca commented Sep 20, 2017

I'm trying to upgrade the client and hub to the latest version and getting the timeout error:

Error: CrossStorageClient could not connect

Any pointers as to what it could be? I double checked that the files are loading correctly (including the es6-promise). And the permissions are unchanged from the previous version.

Any pointers as to what else could cause it?

Change request: Is it possible to make the error message more specific as to why it can't connect?
@ernsheong
Copy link

I am observing working behavior on Macs, while the exact same application is experiencing "CrossStorageClient could not connect" error as well on Windows 8/10. Very odd.

@vsantosu
Copy link

vsantosu commented Nov 2, 2017

Same here... I'm on Mac OSX Chrome.

@danielstjules
Copy link
Contributor

Are you running the latest version of both client and hub?

@vsantosu
Copy link

vsantosu commented Nov 2, 2017

Hello @danielstjules,

Yes, I'm running everything in my development project. I think I'm doing something wrong since all 25 test passes in Chrome, but when I try in my web app it shows the following error:

Error: Timeout: could not perform cross-storage:set

But the onConnect callback is triggered. This is basically my setup:

  //new RegExp(window.location.host+'$')
  CrossStorage.CrossStorageHub.init([
    {origin: /localhost:3000$/, allow: ['get', 'set', 'del', 'getKeys', 'clear']}
  ]);
  /* instantiate the storage */
  self.storage = new CrossStorage.CrossStorageClient(window.location.origin);

window.location.origin is:
"http://localhost:3000"

@danielstjules
Copy link
Contributor

If you change your origin to /.*/ does it work

@vsantosu
Copy link

vsantosu commented Nov 2, 2017

Ok, after a long day of digging into the problem I got some details in case anyone is having problems:

  1. If using the library with angular and running the iframe in the same page, provide an iFrame with another domain instead. Otherwise the Angular controller with routes will keep instantiating into a loop.

  2. The webpackDev Server seems to be buggy and have problems with CORS. I served the hub page from another web server with CORS enabled and finally got it working.

@vsantosu
Copy link

vsantosu commented Nov 2, 2017

Thanks @danielstjules for your help! I really appreciate it!

@JeanerK
Copy link

JeanerK commented Feb 28, 2018

Hello, @vsantosu , I'm using [email protected], and meet the same problem "CrossStorageClient could not connect", can you provide a demo that how you resolved this problem? Thanks very much.

@briansg
Copy link

briansg commented May 30, 2018

Hi @vsantosu , could you provide code snippets of your functioning solution? Or at least more details on where/how you configured each piece hub/client? It seems I'm running into that instantiating loop you mentioned. Thanks in advance!!

Ok, after a long day of digging into the problem I got some details in case anyone is having problems:

If using the library with angular and running the iframe in the same page, provide an iFrame with another domain instead. Otherwise the Angular controller with routes will keep instantiating into a loop.

The webpackDev Server seems to be buggy and have problems with CORS. I served the hub page from another web server with CORS enabled and finally got it working.

@vsantosu
Copy link

Hello @briansg, the problem was that if you don't point the cross storage iframe to a different domain, it will load and instantiate the cross storage component over and over in a loop because will be recursive. To prevent this, host your hub in a different domain with a plain HTML, not angular:

hub.mydomain.com

<!doctype html>
<head>
  <title>Production Cross Storage Hub</title>
</head>
<body>
  <script type="text/javascript" src="hub.js"></script>
  <script>

    CrossStorageHub.init([
      {origin: /.*mydomain\.com$/, allow: ['get', 'set', 'del', 'getKeys', 'clear']}
    ]);
  </script>
</body>
</html>

Then, lets say you are trying to connect to that hub from app.mydomain.com

 var self = this;

  self.storage = new CrossStorage.CrossStorageClient("hub.mydomain.com");
  /* on init */
  self.storage.onConnect().then(function() {
    /* switch is connected flag */
    self._isConnected = true;
    /* call all connected callbacks */
    self._onConnectCallbacks.forEach(function(f){
      f.apply(null,[]);
    });
  },function(err){
    self._onConnectCallbacks.forEach(function(f){
      f.apply(null,[err]);
    });
  });

  /* Storage Operations */
  self.set = function(k,v){
    if (typeof v === 'string'){
      return self.storage.set(k, v);
    }else{
      return self.storage.set(k, JSON.stringify(v));
    }
  };
  self.get = function(k){
    return self.storage.get(k);
  };

Here I created an Angular Service that will use the same instance of the cross storage client on all controllers, this solved my problem. Hope it helps.

@briansg
Copy link

briansg commented May 30, 2018

Hey thanks a lot for you quick reply @vsantosu !!

It sure helps, now I have a better understanding on what was going on and how to solve the instantiation loop issue. =)

@mihirsuchak11
Copy link

@vsantosu
Hello I am getting an error "Error: CrossStorageClient could not connect at client.js:152". I have two sub domains auth-example.com and expert-example.com. I am declaring hub in auth-example.com like this.
"CrossStorageHub.init([{origin: /://(www.)?auth-example.com$/, allow: ['get', 'set', 'del']}]);"
and client side is expert-example.com
" var storage = new CrossStorageClient('https://auth.example.com');",
everything works perfect only on localhosts but error is occurring on live. and I can console in auth-example.com(in hub) but getting error on sub domains side (client side) Anyone can help me?
TIA

@azherf
Copy link

azherf commented May 20, 2019

Hi @mihirsuchak11, Could you resolve the issue that you were faced with when working on live servers ?
Even we see that things work nice on local, however when deployed in live servers we get Error: CrossStorageClient could not connect.

@mihirsuchak11
Copy link

mihirsuchak11 commented May 20, 2019 via email

@omercikayse
Copy link

Hello, I'm using angular8, and meet the same problem "CrossStorageClient could not connect", can you provide a demo that how you resolved this problem? Thanks very much.

@thackerronak
Copy link

Any update on above issue?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
10 participants
@danielstjules @ernsheong @vsantosu @azherf @siulca @briansg @mihirsuchak11 @JeanerK @omercikayse @thackerronak