Fetch APIでhttps：//login.live.com/oauth20_authorize.srf？client_id = ...

Question

を読み込めません。私はReactjsアプリケーションで、Web API 2とのインターフェイスでMicrosoft認証でAzureに展開された問題を実行しています。

Fetch API cannot load https://login.live.com/oauth20_authorize.srf? 
client_id=[...]&redirect_uri=[MY_REDIRECT_URL]. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin '[MY_AZURE_SITE]' is therefore not allowed access. If an opaque response serves 
your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 

私はアズールには本当に新しいですし、私はここで間違ってどこに行ったので、私はわからないよリアクト使用：初期GET要求は言うエラーがスローされます。この問題についての奇妙な部分は、私は私のアプリのためのMicrosoft認証を回す場合、それは期待どおりに動作するということです。

私はこの問題に少しずつ取り組んできましたが、どこが間違っているのかは分かりません。この問題のトラブルシューティングに役立つ情報があるかどうかもわかりませんので、コード/情報の問い合わせを自由にしてください。質問を更新します。

Answer 1

サイトの元のホストと異なるURLからコンテンツを取得しようとしています。 セキュリティ上の理由から、APIは要求に対していくつかのルールを設定します。リクエストを行うには、CORSを設定する必要があります。あなたの要求に応じて適切なヘッダーを設定する必要があります。それは、独自に異なるドメイン、プロトコル、またはポートから リソースを要求したとき

あなたがCORS here

リソースについての詳細を読むことができますが、クロスオリジンのHTTP要求を行います。 の例の場合、http://domain-a.comから提供されるHTMLページは、http://domain-b.com/image.jpgの srcリクエストを行います。ウェブ上の多くのページ は、別のドメインの からCSSスタイルシート、画像、スクリプトなどのリソースを読み込みます。

セキュリティ上の理由から、ブラウザは、スクリプト内から開始されたクロスオリジンHTTPリクエスト を制限します。たとえば、XMLHttpRequestとFetch は、同じ起点のポリシーに従います。そのため、 XMLHttpRequestまたはFetchを使用するWebアプリケーションは、独自の ドメインにのみHTTP要求を作成できます。ウェブアプリケーションを改善するために、開発者はブラウザベンダーにドメイン間の要求を許可するよう頼んだ。