如何解决两个Amazon S3存储桶之间的CORS跨域访问报错问题

问题根因 #

你遇到的跨源报错和存储桶B的CORS配置完全无关，CORS规则仅作用于跨源HTTP请求场景，而你触发的是跨源DOM访问限制：你在存储桶A的页面里调用window.open打开存储桶B的页面后，直接访问了返回窗口对象的DOM属性/JS属性，这被浏览器的同源策略禁止，和S3的CORS配置没有关系。

修复方案（无需修改现有S3配置） #

你需要调整两个存储桶里的前端代码，遵循postMessage的标准通信逻辑，不要直接访问跨源窗口的属性：

• 存储桶B的页面（拿到token的页面）代码逻辑：
  拿到URL里的token后，调用postMessage向父窗口（存储桶A的源站）发送数据，示例代码：

  // 存储桶B的页面代码
  const token = new URLSearchParams(window.location.search).get('token')
  // 仅向你信任的存储桶A源站发送数据，替换成你实际的A桶域名
  window.opener.postMessage({token}, 'https://xxxx.s3.amazonaws.com')
  // 发送完成后可以自动关闭当前窗口
  window.close()
  

• 存储桶A的页面代码逻辑：
  监听message事件接收B桶发送过来的token，不要尝试直接访问window.open返回的窗口对象的属性，示例代码：

  // 存储桶A的页面代码
  window.addEventListener('message', (e) => {
    // 校验来源是你信任的B桶域名，防止恶意消息
    if (e.origin !== '你的B桶实际域名') return
    const token = e.data.token
    // 后续处理token的逻辑
  })
  // 打开B桶窗口的代码正常写即可，不要尝试读取open返回的窗口对象的内部属性
  window.open('B桶的授权回调地址', '_blank')
  

更简便的实现方案（无需额外创建存储桶B） #

你一开始的两次重定向丢token的问题，可以直接通过调整配置解决，避免多存储桶的复杂度：

• 在Route53解析你的自定义域名，绑定SSL证书，直接给S3存储桶A配置自定义域名+HTTPS访问
• 把第三方API的授权回调地址直接改成你存储桶A的自定义域名地址，不需要额外做重定向，自然就不会出现跳转丢token的问题

内容的提问来源于stack exchange，提问作者Jiang Wen