Local storage across pages on same domain but using different ports

Ports must be the same for origin rules to work. The only way around this is a server-side proxy.

Definition of an origin:

Two pages have the same origin if the protocol, port (if one is specified), and host are the same for both pages.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Same_origin_policy_for_JavaScript

To pass tokens between apps, I've resorted to using cookies:

Set cookie on client side of app-001

<script>( function() { document.cookie = 'token=undefined; token_expires=Fri, 3 Aug 2020 20:47:11 UTC; path=/' } )();</script>

Then to use the cookies on the client side of app-002

<script>( function() { console.log( document.cookie.replace(/(?:(?:^|.*;s*)token*=s*([^;]*).*$)|^.*$/, '$1') ); } )();</script>

Then once you have the cookie on either app, add it to a localStorage making slightly easier access moving forward.

<script>( function() { localStorage.setItem('token', document.cookie.replace(/(?:(?:^|.*;s*)token*=s*([^;]*).*$)|^.*$/, '$1') );); } )();</script>

Related