Javascript 一个iframe随机失败到XHR

我有一个关于

http://localhost:3000

包含其

src

为

http://localhost:3010/login

。iframe执行以下操作：

• 请求

  src

  html
• 在接收到302重定向后，它跟随它到

  http://localhost:3000/oauth/authorize?response_type=code&client_id=1&redirect_uri=http%3A%2F%2Flocalhost%3A3011%2Fauthorization_code&state={state}

• 然后将iframe重定向回它自己的原点：

  http://localhost:3010/authorization_code?code={code}&state={state}

• iframe嵌入式应用程序的服务器成功地将授权代码交换为访问令牌，并重定向到

  http://localhost:3010

  将cookie设置为OAuth2

  访问\u令牌

• 一些JavaScript代码生成一个XHR到

  http://localhost:3010/api/customerInfo

• 使用JavaScript返回客户信息并在iframe中呈现

所以这一切都很好

但是，当我添加第二个iframe嵌入式应用程序时，其自身的源代码为

localhost:3020

，并通过相同的流程，其中一个应用程序的第一个XHR将失败，并出现以下错误：

无法加载XMLHttpRequest。请求的资源上不存在“Access Control Allow Origin”标头。因此，不允许访问源“”。响应的HTTP状态代码为400

这看起来有点奇怪，因为它说它不能通过XHR加载已经通过重定向加载的URL

有时一个iframe失败，有时另一个iframe失败。每次在每个浏览器中，一个iframe都可以执行XHR，而另一个iframe会导致此错误。我甚至将两个iFrame的初始XHR延迟了不同的时间，这样它们就不会重叠，但没有效果

---

iFrame是动态生成的（通过React），并具有以下属性：

sandbox='allow-forms allow scripts allow home origin'

这是由于Cookie不是端口特定的，而不像同源策略认为端口号是源的一部分。在这种情况下，两个iFrame共享cookie，并且都使用

access\u token

作为包含OAuth访问令牌的cookie的名称。完成授权过程的第二个iframe将覆盖第一个iframe的

access\u令牌

cookie，导致来自后一个iframe的后续iframe调用失败。我通过使用唯一的cookie名称修复了这个问题。另一种修复方法是使用不同的主机名并编辑计算机的主机文件