[解決済み] プリフライト応答が成功しない

質問

Azure APIにリクエストを送るWebアプリケーションをangularで開発しています。APIはangularで保護されています。私がブラウザでURLを呼び出すと、私はマイクロソフトのログインページにリダイレクトされます。ログイン後、私はAPIに戻ってきました。

さて、angularアプリからAPIにリクエストを送りたいと思います。

const auth = btoa("[my username]:[my password]");
headers = {"Authorization": "Basic " + auth};

$http.get("http://[webapp name].azurewebsites.net/api/contacts", {headers: headers}).then(function (response) {
    console.log("!!!LoggedIn!!!");
});

azureポータルのCORSに[webapp名].azurewebsites.netを追加してみました。 これを実行すると、エラーが発生します。

[Error] Failed to load resource: server responded with status of 400 (不正なリクエスト)

[Error] リソースの読み込みに失敗しました。プリフライトの応答が成功しません

[エラー] XMLHttpRequestが読み込めない http://[ウェブアプリ 名前].azurewebsites.net/api/contacts

azurewebsites.net/api/contacts. プリフライトの応答が正常に行われない

修正する方法を教えてください。

アップデイト

このコードでもう一度試してみました。

const auth = btoa("[my username]:[my password]");
var config = {headers:  {
              'Authorization': 'Basic ' + auth,
              "Origin": "http://[webapp name].azurewebsites.net/api/contacts",
              "Access-Control-Request-Method": "GET",
              "Access-Control-Request-Headers": "X-Custom-Header"
              }
};

$http.get("http://[webapp name].azurewebsites.net/api/contacts", config).then(function (response) {
    console.log("!!!LoggedIn!!!");
});

今、このようなエラーが出ています。

安全でないヘッダ "Origin"の設定を拒否されました。

安全でないヘッダー "Access-Control-Request-Method" の設定を拒否されました。

安全でないヘッダー "Access-Control-Request-Headers" の設定を拒否されました。

プリフライトリクエストに対するレスポンスがアクセスコントロールチェックに合格していません。要求されたリクエストに 'Access-Control-Allow-Origin' ヘッダーが存在しない。 リソースがあります。したがって、Origin 'null'はアクセスを許可されていません。このレスポンス はHTTPステータスコード400

これらの "unsafe headers" を削除しても、最後のエラーメッセージは残っています。

なぜOriginは自動的にnullになるのですか？

解決方法は？

リクエストサイトのURLのアドレスをCORSで サーバー/バックエンド のコードで指定します。言語やフレームワークによって、この追加方法は異なるかもしれませんので、Googleで "[backend language] cors" (e.g. "C# cors") と検索してみてください。(クレジット: @Gary Liu - MSFT)

開発者コンソールのネットワークタブを確認することで、正しいオリジンを追加したことを確認することができます。

まず、メソッド OPTIONS

次に Access-Control-Allow-Origin は、あなたの Origin