跨同一域上的页面但使用不同端口的本地存储答案

【问题标题】：Local storage across pages on same domain but using different ports跨同一域上的页面但使用不同端口的本地存储
【发布时间】：2021-01-18 20:13:41
【问题描述】：

我正在尝试在同一域上的各个页面上使用本地存储，但由于某种原因，如果它们使用不同的端口，Firefox 会跨页面创建相同存储数据的多个实例。因此，如果我为www.example.com:80 设置的内容在转到www.example.com:8000 时不会持续存在，它将创建相同数据的全新冗余条目。我怎样才能纠正这个问题并让它使用相同的条目？

【问题讨论】：

你可以使用普通的 iframe 页面和 postMessage()
还要注意这里的错误是断言域是同一个。根据定义。不同的端口是不同的数据源，因此不能仅仅因为它们共享一个主机名就被视为“同一个域”。

标签： javascript html local-storage

【解决方案1】：

端口必须相同才能使源规则起作用。解决此问题的唯一方法是使用服务器端代理。

原点的定义：

如果协议、端口（如果一个是指定），并且主机对于两个页面都是相同的。

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

【讨论】：

呃... GM_setValue() 然后是

【解决方案2】：

为了在应用程序之间传递令牌，我使用了 cookie：

在 app-001 的客户端设置 cookie

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

然后在app-002的客户端使用cookies

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

然后，一旦您在任一应用程序上获得了 cookie，将其添加到 localStorage 中，以便进一步访问。

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

【讨论】：

【解决方案3】：

通过 headers 将本地存储数据发送到其他端口请求。像这样。

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

【讨论】：