CORS: le mode des informations d'identification est 'inclure'

Oui, je sais ce que vous pensez - encore une autre question CORS, mais cette fois je suis perplexe.

Donc, pour commencer, le message d'erreur réel:

XMLHttpRequest ne peut pas charger http: //localhost/Foo.API/token . La valeur de l'en-tête «Access-Control-Allow-Origin» dans la réponse ne doit pas être le caractère générique «*» lorsque le mode des informations d' identification de la demande est «inclure» . L' accès à l' origine ' http: // localhost: 5000 ' n'est donc pas autorisé. Le mode d'informations d'identification des demandes initiées par XMLHttpRequest est contrôlé par l'attribut withCredentials.

Je ne suis pas sûr que le mode d'identification signifie «inclure» ?

Ainsi, lorsque j'effectue la demande dans Postman, je ne rencontre pas une telle erreur:

Mais lorsque j'accède à la même requête via mon application Web angularjs, je suis perplexe face à cette erreur. Voici ma demande / réponse angualrjs. Comme vous le verrez, la réponse est OK 200, mais je reçois toujours l'erreur CORS:

Demande et réponse de Fiddler:

L'image suivante montre la demande et la réponse du front-end Web à l'API

Donc, sur la base de tous les autres articles que j'ai lus en ligne, il semble que je fais la bonne chose, c'est pourquoi je ne comprends pas l'erreur. Enfin, voici le code que j'utilise dans angualrjs (login factory):

Implémentation CORS dans l'API - Objectifs de référence:

Méthode 1 utilisée:

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 utilisée:

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 d'avance!

Le problème provient de votre code angulaire:

Lorsque withCredentialsest défini sur true, il essaie d'envoyer des informations d'identification ou des cookies avec la demande. Comme cela signifie qu'une autre origine essaie potentiellement de faire des demandes authentifiées, le caractère générique ("*") n'est pas autorisé comme en-tête "Access-Control-Allow-Origin".

Vous devrez répondre explicitement avec l'origine qui a fait la demande dans l'en-tête "Access-Control-Allow-Origin" pour que cela fonctionne.

Je recommanderais de mettre explicitement sur liste blanche les origines que vous souhaitez autoriser pour effectuer des demandes authentifiées, car le simple fait de répondre avec l'origine de la demande signifie que tout site Web donné peut passer des appels authentifiés à votre backend si l'utilisateur a une session valide.

J'explique ce truc dans cet article que j'ai écrit il y a quelque temps.

Vous pouvez donc définir withCredentialssur false ou implémenter une liste blanche d'origine et répondre aux demandes CORS avec une origine valide chaque fois que des informations d'identification sont impliquées

Si vous utilisez le middleware CORS et que vous voulez envoyer withCredentialsboolean true, vous pouvez configurer CORS comme ceci:

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

»

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

Du côté angulaire, il fallait ajouter un indicateur d'option withCredentials: truepour le transport des cookies:

constructor(public http: HttpClient) {
}

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

Sur le côté serveur Java, ajout requis CorsConfigurationSourcepour la configuration de la stratégie 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()...
    }
}

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

Si cela aide, j'utilisais une centrifugeuse avec mon application reactjs et, après avoir vérifié quelques commentaires ci-dessous, j'ai regardé 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 cela aide!

Si vous utilisez .NET Core, vous devrez .AllowCredentials () lors de la configuration de CORS dans Startup.CS.

À l'intérieur de ConfigureServices

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

services.AddMvc();

Puis à l'intérieur de Configure:

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

Pour moi, c'était précisément des options manquantes.AllowCredentials () qui ont causé l'erreur que vous avez mentionnée. Comme note latérale en général pour les autres ayant des problèmes CORS, l'ordre est important et AddCors () doit être enregistré avant AddMVC () à l'intérieur de votre classe Startup.