本文共 1342 字，大约阅读时间需要 4 分钟。

跨域数据传输与同源策略

在网络开发中，跨域数据传输一直是一个需要关注的重要问题。特别是在涉及用户数据的场景中，如何在不同域名之间安全地传输和共享数据，成为了开发者必须解决的核心问题之一。

当我们从一个网页（A页面）跳转到另一个网页（B页面）时，根据浏览器的同源策略，如果两个网页的协议、地址或端口有任何一个不同，则它们的 localStorage、sessionStorage 和 cookie 数据将无法共享。这意味着在不同域名之间，传统的本地存储方式无法直接实现数据的持久化共享。

为了克服这一限制，开发者常常会选择使用 iframe 技术来实现跨域通信。A页面可以通过引入 iframe 标签，将 B 页面的内容嵌入其中，从而在一定程度上模拟跨域的数据传输效果。这种方式虽然不能完全绕过同源策略，但可以在一定程度上实现数据的传递和处理。

在实际应用中，A页面需要向 B页面传递登录获得的 token 数据。这种数据传递可以通过以下方式实现：

const login = () => {    // 调用登录接口    // ...    if (res.code === 200) {        const data = {            token: res.data.token,            rfToken: res.data.rfToken,        };        let iframe = document.getElementById("iframe");        iframe.contentWindow.postMessage(JSON.stringify(data), "http://192.192.192.192:30529/homeView");    }};

在上述代码中，iframe.contentWindow.postMessage 方法被用于将数据从 A页面发送到 B页面。第一个参数是需要传递的数据，第二个参数是目标页面的地址。这种方式虽然看起来简单，但在实际应用中需要注意跨域政策的限制。

为了接收并处理这些数据，B页面可以通过以下方式进行处理：

window.addEventListener("message", e => {    window.localStorage.setItem("user", JSON.parse(JSON.stringify(e.data)));});

在这个代码中，B页面通过监听 message 事件来接收来自 A页面的数据，并将其存储在 localStorage 中。这种方式虽然不能直接共享本地存储，但通过将数据持久化存储在客户端的 localStorage 中，实现了数据的跨域传输和持久化。

需要注意的是，虽然这种方法可以在一定程度上实现跨域数据的传递和持久化存储，但它仍然存在一定的安全性风险。因此，在实际应用中需要根据具体的业务需求和安全要求，采取相应的加密和验证措施。

通过 iframe 技术和同源策略的巧妙运用，我们可以在跨域场景下实现数据的安全传输和持久化存储。这不仅解决了传统本地存储的限制问题，还为跨域应用提供了一种灵活的数据交互方式。

转载地址：http://taxfk.baihongyu.com/