[解決済み] CORS: 認証モードは 'include' です。

質問

そう、私はあなたが何を考えているか知っています - また別の CORS の質問です。

まず始めに、実際のエラーメッセージをご覧ください。

XMLHttpRequest は http://localhost/Foo.API/token を読み込むことができません。レスポンスの レスポンスに含まれる 'Access-Control-Allow-Origin' ヘッダーの値は、リクエストの際にワイルドカード '*' であってはなりません。 がワイルドカード '*' でない場合、リクエストの の認証モードが 'インクルード' . Origin 'http://localhost:5000'へのアクセスは許可されていません。 にアクセスすることができます。によって開始されるリクエストの資格情報モードは、withCredentials 属性によって制御されます。 XMLHttpRequest によって開始されるリクエストの認証モードは withCredentials 属性によって制御されます。

が何を意味しているのかよくわかりません。 資格情報モードは 'include' です。 ?

というわけで、postmanでリクエストを実行すると、以下のようになります。 はありません。 といったエラーが発生します。

しかし、私がangularjsのウェブアプリから同じリクエストにアクセスすると、私はこのエラーでつまずく。以下は、私のangualrjsリクエスト/レスポンスです。ご覧の通り、レスポンスは OK 200 ですが、私はまだCORSエラーを受け取っています。

Fiddlerのリクエストとレスポンスです。

次の画像は、WebフロントエンドからAPIへのリクエストとレスポンスを示しています。

つまり、私がネットで読んだ他のすべての投稿に基づくと、それは は のように、私は正しいことをやっている、それがエラーを理解できない理由です。最後に、以下は私がangualrjs内で使用しているコードです（ログインファクトリ）。

APIでのCORSの実装 - 参照目的。

方法1を使用。

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        EnableCrossSiteRequests(config);
    }

    private static void EnableCrossSiteRequests(HttpConfiguration config)
    {
        var cors = new EnableCorsAttribute("*", "*", "*")
        {
            SupportsCredentials = true
        };
        config.EnableCors(cors);
    }
}

方法2を使用。

public void Configuration(IAppBuilder app)
{
    HttpConfiguration config = new HttpConfiguration();
 
    ConfigureOAuth(app);
 
    WebApiConfig.Register(config);
    app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
    app.UseWebApi(config);

}

どのように解決するのですか？

この問題は、Angularのコードに起因しています。

いつ withCredentials が true に設定されている場合、リクエストと一緒に認証情報または Cookie を送信しようとしています。これは別のオリジンが潜在的に認証されたリクエストを行おうとしていることを意味するので、ワイルドカード ("*") は "Access-Control-Allow-Origin" ヘッダーとして許可されません。

これを動作させるには、"Access-Control-Allow-Origin" ヘッダーで、リクエストを行ったオリジンを明示的に応答する必要があるでしょう。

認証されたリクエストを行うことを許可したいオリジンを明示的にホワイトリスト化することをお勧めします。リクエストのオリジンで単に応答すると、ユーザーがたまたま有効なセッションを持っている場合、任意の Web サイトがバックエンドに認証された呼び出しを行うことができることを意味するからです。

この内容については この記事 ちょっと前に書いた。

ということで withCredentials を false に設定するか、オリジン ホワイトリストを実装して、クレデンシャルが関与する場合は常に有効なオリジンで CORS リクエストに応答します。