プリフライトレスポンスが成功しない

Question

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

は今、私は私の角度アプリから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!!!"); 
}); 

私は紺碧のポータルでの私のCORSに[Webアプリケーション名] .azurewebsites.netを追加しました。

[Error] Failed to load resource: the server responded with a status of 400 (Bad Request)

[Error] Failed to load resource: Preflight response is not successful

[Error] XMLHttpRequest cannot load http://[webapp name].azurewebsites.net/api/contacts

azurewebsites.net/api/contacts：私はこれを実行すると は、私はエラーを取得します。プリフライトレスポンスがうまくいかない

どのように修正するのですか？

UPDATE

私はこのコードで再びそれを試してみました：私はこれらの "安全でないのヘッダー" を削除する場合

Refused to set unsafe header "Origin"

Refused to set unsafe header "Access-Control-Request-Method"

Refused to set unsafe header "Access-Control-Request-Headers"

Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 400

：

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が自動的にnullになるのですか？

Answer 1

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

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

まず方法OPTIONS

で要求を選択しAccess-Control-Allow-OriginがCORSの設定がお使いの言語やフレームワークに依存バックエンドサーバ側で設定する必要がありますあなたのOrigin