web-dev-qa-db-ja.com

プリフライト応答は成功しません

私は、Azure APIにリクエストを送信するangularを使用してWebアプリケーションを開発しています。APIは角度によって保護されています。ブラウザでURLを呼び出すと、Microsoftログインにリダイレクトされますログイン後、APIに戻ります。

ここで、angular app：から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!!!");
});

[webapp name] .azurewebsites.netをAzureポータルのCORSに追加しました。これを実行すると、次のエラーが表示されます。

[エラー]リソースの読み込みに失敗しました：サーバーはステータス400（Bad Request）で応答しました

[エラー]リソースの読み込みに失敗しました：プリフライトレスポンスは成功しません

[エラー] XMLHttpRequestをロードできません http：// [webapp name] .azurewebsites.net/api/contacts

azurewebsites.net/api/contacts。プリフライト応答は成功しません

それを修正する方法はありますか？

[〜＃〜] update [〜＃〜]

私はこのコードでもう一度試しました：

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

これらの「安全でないヘッダー」を削除すると、最後のエラーメッセージがまだ残っています。

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

angularjshttpazurexmlhttprequest
5
chocolate cake

CORSに要求サイトのURLのアドレスを追加する必要があります。

開発者のコ​​ンソールの[ネットワーク]タブを調べると、正しいOriginが追加されていることを確認できます。

まず、メソッドOPTIONSでリクエストを選択しますenter image description here

次に、Access-Control-Allow-OriginはOriginと同じです enter image description here

7
Icycool