Question

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

Answer 1

要使原始规则起作用，端口必须相同。解决这个问题的唯一方法是服务器端代理。

原产地的定义：

如果协议，端口（如果是），则两个页面具有相同的来源   指定的），两个页面的主机相同。

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

Answer 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客户端的cookie

<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>

Answer 3

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

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

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

3 个答案: