Local Storage Across Pages On Same Domain But Using Different Ports

I'm trying to use local storage across various pages on the same domain, but for some reason Firefox is creating multiple instances of the same storage data across pages if they ar

Solution 1:

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

Solution 2:

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>

Solution 3:

send the local storage data to the other port request through headers. like this.

var token = localStorage.getItem("auth-token");
.
.
.
exportconstfetchPosts = () =>
    axios.get(url, { headers: { Authorization: `Bearer ${token}` } });