srcがhttp://localhost:3010/loginのiframeを含むhttp://localhost:3000のページがあります。 iframeは次の処理を行います。1つのiframeがランダムにXHRに失敗する
srcをリクエストしてください。- 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をOAuth2access_tokenに設定します。 - 一部のJavaScriptコードでは、XHRを
http://localhost:3010/api/customerInfoにしています。 - JavaScriptを使用して顧客情報が返され、iframeに表示されます。
これはすべて正常に動作します。
私は同じ流れを通過し、自身の原点をlocalhost:3020、を有する第二はiframe埋め込まれたアプリを追加するときただし、アプリの最初のXHRの一つが次のエラーで失敗します。
XMLHttpRequest cannot load http://localhost:3000/oauth/authorize?response_type=code&redirect_uri=http%3A%2F%2Flocalhost%3A3011%2Fauthorization_code&state=17nCw5o0Tr11Y6z8&client_id=1 . No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin ' http://localhost:3010 ' is therefore not allowed access. The response had HTTP status code 400.
それはすでにリダイレクトを介してロードされているXHRを介してURLを読み込むことができないと言っているので少し奇妙に思えます。
iframeが1つ失敗し、時にはもう一方が失敗することがあります。毎回ブラウザごとに1つのiframeがXHRを実行し、もう1つがこのエラーを引き起こします。私はiframeの最初のXHRを異なる量だけ遅らせ、重複しないようにしましたが、無駄にしませんでした。
iframeは（Reactを介して）動的に生成され、この属性はsandbox='allow-forms allow-scripts allow-same-origin'です。