web-dev-qa-db-fra.com

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

Oui, je sais ce que vous pensez - encore une autre question de la SCRO, 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 d'identification de la demande est 'include' . Origin ' http: // localhost: 50 ' n'est donc pas autorisé à accéder. Le mode des informations d'identification des demandes initiées par XMLHttpRequest est contrôlé par l'attribut withCredentials.

Je ne suis pas sûr de ce que l'on entend par . Le mode des informations d'identification est 'include' ?

Ainsi, lorsque j'exécute la demande dans le facteur, je ne rencontre pas cette erreur:

enter image description here

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

Requête du violoniste et réponse:

L'image suivante illustre la demande et la réponse du serveur Web frontal à l'API.

Fiddler

Donc, basé sur tous les autres articles que j'ai lus en ligne, il semble comme si je faisais ce qu'il fallait, c'est pourquoi je ne peux pas comprendre l'erreur. Enfin, voici le code que j'utilise dans angualrjs (login factory):

enter image description here

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!

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

Le problème provient de votre code Angular:

Lorsque withCredentials est défini sur true, le système tente d'envoyer des informations d'identification ou des cookies avec la demande. Comme cela signifie qu'une autre origine tente 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".

Pour que cela fonctionne, vous devez explicitement répondre avec l'origine qui a effectué la demande dans l'en-tête "Access-Control-Allow-Origin".

Je recommanderais de explicitement inclure dans la liste blanche les origines que vous souhaitez autoriser à faire des demandes authentifiées, car répondre simplement à l'origine à partir de la demande signifie qu'un site Web donné peut faire des appels authentifiés à votre serveur si l'utilisateur dispose d'une session valide.

J'explique ces choses dans cet article J'ai écrit il y a longtemps.

Ainsi, vous pouvez soit définir withCredentials sur false, soit 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.

56
geekonaut

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

Du côté Angular requis l'ajout de l'indicateur d'option withCredentials: true pour le transport de cookie:

constructor(public http: HttpClient) {
}

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

Sur Java côté serveur requis, l'ajout de CorsConfigurationSource à la stratégie de configuration 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) utilise par défaut corsConfigurationSource pour http.cors()

4
Pavel

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: 50 '}));

1
Ankur Kedia

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!

0
Gustavo Garcia

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’est précisément le manque d’options.AllowCredentials () qui a causé l’erreur que vous avez mentionnée. En règle générale, pour les autres personnes ayant également des problèmes avec CORS, l'ordre est important et AddCors () doit être enregistré avant AddMVC () dans votre classe de démarrage.

0
Steven Pfeifer