一个iframe随机无法进行XHR

Question

我在http://localhost:3000上有一个页面，其中包含src为http://localhost:3010/login的iframe。 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 access_token。
• 某些JavaScript代码将XHR设为http://localhost:3010/api/customerInfo。
• 使用JavaScript返回客户信息并在iframe中呈现。

所以这一切都很好。

然而，当我添加第二个iframe嵌入式应用程序时，其内容来自localhost:3020，它经历了相同的流程，其中一个应用程序＆＃39;第一个XHR将失败并出现以下错误：

  

XMLHttpRequest无法加载http://localhost:3000/oauth/authorize?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3011%2Fauthorization_code&state=17nCw5o0Tr11Y6z8&client_id=1。 No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost:3010＆＃39;因此不允许访问。响应的HTTP状态代码为400。

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

有时候一个iframe会失败，有时会失败。每次在每个浏览器中，一个iframe可以执行XHR，另一个iframe会导致此错误。我甚至推迟了两个iframe＆＃39;不同数量的初始XHR，以便它们不重叠，但无济于事。

iframe是动态生成的（通过React）并具有以下属性：sandbox='allow-forms allow-scripts allow-same-origin'。

Answer 1

这是由于cookie不是特定于端口的，与同源策略不同，后者认为端口号是源的一部分。在这种情况下，两个iframe都在共享Cookie，并且两者都使用access_token作为包含OAuth访问令牌的Cookie的名称。完成授权过程的第二个iframe将覆盖第一个iframe的access_token Cookie，导致后一个iframe的后续iframe调用失败。我通过使用唯一的cookie名称来修复此问题。另一种解决方法是使用不同的主机名并编辑计算机的主机文件。