web-dev-qa-db-ja.com

CORS：認証情報モードは 'include'です

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

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

XMLHttpRequestはロードできません http：//localhost/Foo.API/token 。要求の認証情報モードが 'include'の場合、応答の 'Access-Control-Allow-Origin'ヘッダーの値はワイルドカード '*'にしないでください。オリジン ' http：// localhost：50 'はアクセスを許可されていません。 XMLHttpRequestによって開始された要求の信任状モードは、withCredentials属性によって制御されます。

認証情報モードの意味が 'include'であることがわかりませんか。

だから私は郵便配達員で要求を実行すると、私はnoこのようなエラーが発生します。

enter image description here

しかし、私がangularjsウェブアプリを通して同じリクエストにアクセスするとき、私はこのエラーに困惑しています。これが私のangualrjsリクエスト/レスポンスです。ご覧のとおり、応答はOK 200ですが、それでもCORSエラーが表示されます。

フィドラーリクエストとレスポンス：

次の図は、WebフロントエンドからAPIへの要求と応答を示しています。

Fiddler

だから私がオンラインで読んだ他のすべての投稿に基づいて、私が正しいことをしているようにそれはそうです、それが私がエラーを理解できない理由です。最後に、angualrjs（login factory）内で使用しているコードは次のとおりです。

enter image description here

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);

}

事前に感謝します。

javascriptc#angularjscorsasp.net-web-api2
55
Richard Bailey

問題はAngularコードから発生します。

withCredentialsがtrueに設定されていると、リクエストとともに資格情報またはCookieを送信しようとしています。それは別のOriginが認証されたリクエストを実行しようとしている可能性があることを意味するので、ワイルドカード（ "*"）は "Access-Control-Allow-Origin"ヘッダーとしては許可されません。

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

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

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

そのため、withCredentialsをfalseに設定するか、Originのホワイトリストを実装して、資格情報が含まれる場合は常に有効なOriginでCORS要求に応答することができます。

54
geekonaut

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

Angular側では、Cookie転送用のオプションフラグ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()にcorsConfigurationSourceを使います

3
Pavel

それが助けになるのであれば、私はreactjsアプリで遠心分離機を使用していました、そして、以下のコメントをチェックした後、私は遠心分離機.jsライブラリファイルを見ました。

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

私がこれらの3行を削除した後、アプリは予想通りに、うまくいきました。

それが役に立てば幸い！

0
Gustavo Garcia

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

var cors = require（ 'cors'）;
app.use（cors（{信用証明書：true、発行元： ' http：// localhost：50 '}））;

0
Ankur Kedia