如何跨域获取浏览器STORAGE中存储的目标值？

算力阿峰

2026-8-13

实现方案

首先明确：浏览器的localStorage/sessionStorage受同源策略限制，https://cdn.sat.gob.gt和https://localhost:49955属于不同源，无法直接跨域读取对方的Storage数据，以下是可行的解决路径：

情况1：你能控制`cdn.sat.gob.gt`的页面代码

通过跨页面消息通信（postMessage）实现数据传递：

在cdn.sat.gob.gt的页面中添加消息监听逻辑，收到请求后返回目标Storage值；
在你的本地应用中嵌入iframe加载对方页面，发送请求并接收返回的数据。

本地应用端示例代码：

// 创建并嵌入iframe
const iframe = document.createElement('iframe');
iframe.src = 'https://cdn.sat.gob.gt/目标页面路径';
iframe.style.display = 'none';
document.body.appendChild(iframe);

// 监听iframe发来的消息
window.addEventListener('message', (event) => {
  if (event.origin === 'https://cdn.sat.gob.gt') {
    console.log('获取到的Storage值:', event.data);
    // 这里处理拿到的数据
  }
});

// 页面加载完成后发送请求
iframe.onload = () => {
  iframe.contentWindow.postMessage('请求Storage目标值', 'https://cdn.sat.gob.gt');
};

cdn.sat.gob.gt页面端示例代码：

window.addEventListener('message', (event) => {
  // 验证请求来源和消息内容
  if (event.origin === 'https://localhost:49955' && event.data === '请求Storage目标值') {
    const targetValue = localStorage.getItem('你要获取的键名');
    event.source.postMessage(targetValue, event.origin);
  }
});

情况2：无法控制`cdn.sat.gob.gt`的页面代码

若对方提供了公开API接口返回该Storage对应的业务数据，直接用fetch或axios请求接口，需确保接口配置了CORS允许localhost:49955跨域访问；
若对方无公开接口且不允许跨域，需通过后端代理：在你的后端服务中请求cdn.sat.gob.gt的资源（后端不受浏览器同源策略限制），再将数据返回给前端应用。