CORS: le mode d'identification est 'include'

Question

Oui, je sais ce que vous pensez - encore un autre de la SCRO question, mais cette fois, je suis perplexe.

Donc, pour commencer, le message d'erreur:

XMLHttpRequest ne peut pas charger http://localhost/Foo.API/token. L' la valeur de l '"Access-Control-Allow-Origin' en-tête de la réponse pas le caractère générique '*' lors de la demande les informations d'identification de mode est "inclure". Origine 'http://localhost:5000' est donc pas permis d'accès. Les informations d'identification du mode de demandes initiées par le XMLHttpRequest est contrôlée par le withCredentials attribut.

Je ne suis pas sûr de ce que l'on entend par informations d'identification de mode est "inclure"?

Alors quand j'ai effectuer la demande dans le facteur, j'ai de l'expérience pas d' erreur de ce type:

Mais lorsque j'accède à la même demande par le biais de mon angularjs web app, je suis perplexe par cette erreur. Voici mon angualrjs de requête/réponse. Comme vous allez le voir, la réponse est - OK 200, mais je reçois encore de la SCRO d'erreur:

Fiddler Demande et de la Réponse:

L'image suivante illustre la requête et la réponse front-end web API

Sur la base de tous les autres postes que j'ai lu en ligne, il semble que comme je suis en train de faire la bonne chose, c'est pourquoi je ne comprends pas l'erreur. Enfin, voici le code que j'utilise dans angualrjs (login usine):

La SCRO mise en Œuvre de l'API de Référence à des fins:

Méthode 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);
    }
}

Méthode 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);

}

Merci beaucoup d'avance!

Answer 1

Le problème provient de votre Angulaire de code:

Lors de l' withCredentials est défini sur true, il est tentant d'envoyer des informations d'identification ou des cookies avec la demande. Que signifie une autre origine est potentiellement essayer de faire les requêtes authentifiées, le caractère générique ("*") n'est pas autorisée comme "Access-Control-Allow-Origin" en-tête.

Vous devez explicitement de répondre à l'origine de la demande dans le "Access-Control-Allow-Origin" en-tête pour faire ce travail.

Je recommande explicitement de la liste blanche de l'origine que vous souhaitez autoriser à faire les requêtes authentifiées, parce que tout simplement de répondre à l'origine de la demande signifie que tout site peut faire des appels authentifiés à votre backend si l'utilisateur arrive à avoir une session valide.

- Je expliquer ce genre de choses dans cet article , j'ai écrit un bout de temps.

Ainsi, vous pouvez soit configurer withCredentials de faux ou de mettre en œuvre une origine blanche et de répondre à la SCRO demandes avec une pièce d'origine dès lors que les informations d'identification sont impliqués

Answer 2

Si vous utilisez un middleware CORS et que vous souhaitez envoyer withCredential boolean true, vous pouvez configurer CORS comme suit:

var cors = require ('cors');
app.use (cors ({informations d'identification: true, origine: ' http: // localhost: 5000 '}));

Answer 3

Personnalisation de CORS pour Angular 5 et Spring Security (solution de base Cookie)

Du côté angulaire, l'ajout de l'indicateur d'option withCredentials: true pour le transport de cookies a été nécessaire:

 constructor(public http: HttpClient) {
}

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

Sur le serveur Java, il est nécessaire d’ajouter CorsConfigurationSource pour la stratégie CORS de configuration:

 @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()...
    }
}
 

La méthode configure(HttpSecurity http) par défaut utilisera corsConfigurationSource pour http.cors()

Answer 4

Si cela pouvait aider, j'utilisais centrifuge avec mon application reactjs et, après avoir vérifié certains commentaires ci-dessous, j'ai consulté le fichier de bibliothèque centrifuge.js, qui, dans ma version, contenait l'extrait de code suivant:

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

Après avoir supprimé ces trois lignes, l'application a bien fonctionné, comme prévu.

J'espère que ça aide!