javascript - 書き換え - CORS:認証情報モードは「含める」




js タイトル (3)

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

まず最初に、実際のエラーメッセージ:

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

クレデンシャルモードの 意味 が「include」 かどうかわかりませんか?

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

しかし、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);

}

事前に感謝します!


Angular 5およびSpring SecurityのCORSのカスタマイズ(Cookieベースのソリューション)

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

constructor(public http: HttpClient) {
}

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

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

@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) 、デフォルトで http.cors()http.cors() を使用します


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

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


それが役立つ場合は、reactjsアプリでcentrifugeを使用していたため、以下のコメントを確認した後、centrifuge.jsライブラリファイルを確認しました。このファイルには、次のコードスニペットが含まれていました。

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

これらの3行を削除した後、アプリは正常に機能しました。

それが役に立てば幸い!





asp.net-web-api2