CORS:資格情報モードは「インクルード」です


99

はい、私はあなたが何を考えているか知っています-さらに別のCORSの質問ですが、今回は困惑しています。

まず、実際のエラーメッセージは次のとおりです。

XMLHttpRequestはhttp://localhost/Foo.API/tokenをロードできません。リクエストの認証情報モードが「include」の場合、応答の「Access-Control-Allow-Origin」ヘッダーの値はワイルドカード「*」であってはなりません。起源'のhttp:// localhostを:5000 'がそのためのアクセスが許可されていません。XMLHttpRequestによって開始されたリクエストの認証情報モードは、withCredentials属性によって制御されます。

どういう意味かわかりません 資格情報モードのが「インクルード」か?

したがって、郵便配達員でリクエストを実行しても、そのようなエラーは発生しません

ここに画像の説明を入力してください

しかし、angularjs Webアプリから同じリクエストにアクセスすると、このエラーに困惑します。これが私のangualrjsリクエスト/レスポンスです。ご覧のとおり、応答はですがOK 200、それでもCORSエラーが発生します。

フィドラーの要求と応答:

次の画像は、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);

}

よろしくお願いします!


素敵な写真、それらは何ですか?あなたは認証が含まれている場合、アクセス制御が可能原産の応答は、あなたの質問に答えるためにしなければならない発信元(ブラウザのページ)ホストである、それはできません*ので、サーバ側が間違っCORSをしている- -ああ、および郵便配達動作するためクロスオリジンリクエストではありません
Jaromanda X 2017

@JaromandaX、返信ありがとうございます。写真は、要求/応答と、渡されるヘッダーを示しています。あなたが質問をしていると、明らかにそれは目標を達成しなかったと述べています...
リチャードベイリー

私のコメントはあなたが知る必要があるすべてであるはずです-写真を見る必要はありませんでした
-JaromandaX 2017

そこで最近、Web APIのCookieから離れて、トークンを使用することにしました。Cookieを使用した場合、CORSは問題なく機能します。そのため、サーバー側でCORSが正しく実装されていないことを理解するのに苦労しています
Richard Bailey

1
認証を含める場合、access-control-allow-origin応答は発信元(ブラウザページ)のホストである必要がありますが、そうではありません*
Jaromanda X 2017

回答:


103

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

いつ withCredentialstrueに設定されている、要求と共に資格情報やクッキーを送信しようとしています。これは、別のオリジンが認証されたリクエストを実行しようとしている可能性があることを意味するため、ワイルドカード( "*")は "Access-Control-Allow-Origin"ヘッダーとして許可されていません。

これを機能させるには、「Access-Control-Allow-Origin」ヘッダーでリクエストを行ったオリジンで明示的に応答する必要があります。

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

私はしばらく前に書いたこの記事でこのことを説明します。

したがってwithCredentials、falseに設定するか、オリジンホワイトリストを実装して、認証情報が含まれる場合は常に有効なオリジンでCORSリクエストに応答できます。


3
TypeScriptを使用してAngular5アプリケーションに取り組んでいます。withCredentialsをtrueとして指定する必要があります。そうしないと、AuthorizationFailed例外が発生します。これをwithCredentials:trueで解決する方法
Ziggler

@Ziggler私も同じ状況でした。あなたは解決策を見つけていますか?
Pavel

@Ziggler私は解決策を罰金しました私の答えを見てください。
Pavel

1
WithCredentials = TRUEおよびAccess-Control-Allow-Origin = [' localhost:4200']を使用している場合でもこのエラーが発生し、star *を使用していないため、エラーメッセージは意味をなしません。エラーメッセージ:「プリフライトリクエストへの応答がアクセス制御チェックに合格しません:リクエストの資格情報モードが「include」の場合、応答の「Access-Control-Allow-Origin」ヘッダーの値はワイルドカード*であってはなりません。Originしたがって、「localhost:4200」はアクセスを許可されていません。XMLHttpRequestによって開始された要求の資格情報モードは、withCredentials属性によって制御されます。」
mruanova 2018

@mruanovaは、Access-Control-Allow-Originヘッダーがリクエストに正しく設定されていることを確認しますか?どこかにワイルドカードを付けて何かが送信されているようです
geekonaut 2018

14

CORSミドルウェアを使用していて、withCredentialsブール値trueを送信する場合は、次のようにCORSを構成できます。

var cors = require('cors');    
app.use(cors({credentials: true, origin: 'http://localhost:5000'}));

`


3
命の恩人の答え。そのため1
Nishargシャー

1
私は一日中この問題を解決しようとしています。あなたは救い主です!
Hasan Sefa Ozalp

11

Angular5とSpringSecurityのCORSのカスタマイズ(Cookieベースソリューション)

Angular側ではオプションフラグを追加する必要があります withCredentials: true、Cookieトランスポートのを。

constructor(public http: HttpClient) {
}

public get(url: string = ''): Observable<any> {
    return this.http.get(url, { withCredentials: true });
}

Javaサーバー側では追加が必要 CorsConfigurationSource、構成CORSポリシーにするがあります。

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        // This Origin header you can see that in Network tab
        configuration.setAllowedOrigins(Arrays.asList("http:/url_1", "http:/url_2")); 
        configuration.setAllowedMethods(Arrays.asList("GET","POST"));
        configuration.setAllowedHeaders(Arrays.asList("content-type"));
        configuration.setAllowCredentials(true);
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and()...
    }
}

configure(HttpSecurity http)デフォルトのメソッドcorsConfigurationSourcehttp.cors()


1

それが役立つ場合は、reactjsアプリで遠心分離機を使用していました。以下のコメントを確認した後、私のバージョンでは次のコードスニペットが含まれているcentrifuge.jsライブラリファイルを確認しました。

if ('withCredentials' in xhr) {
 xhr.withCredentials = true;
}

これらの3行を削除した後、アプリは期待どおりに正常に動作しました。

それが役に立てば幸い!


ありがとう...これは私に多くの時間を節約しました!:)
pavan kumar chaitanya

1

.NET Coreを使用している場合は、Startup.CSでCORSを構成するときに.AllowCredentials()を実行する必要があります。

ConfigureServicesの内部

services.AddCors(o => {
    o.AddPolicy("AllowSetOrigins", options =>
    {
        options.WithOrigins("https://localhost:xxxx");
        options.AllowAnyHeader();
        options.AllowAnyMethod();
        options.AllowCredentials();
    });
});

services.AddMvc();

次に、Configureの内部:

app.UseCors("AllowSetOrigins");
app.UseMvc(routes =>
    {
        // Routing code here
    });

私にとって、あなたが言及したエラーの原因となったのは、特にoptions.AllowCredentials()が欠落しているだけでした。CORSの問題を抱えている他の人への一般的な補足として、順序が重要であり、AddCors()はStartupクラス内のAddMVC()の前に登録する必要があります。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.