CORS: le mode 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’informations d’ identification de la demande est ‘include’ . L’origine ‘ http: // localhost: 5000 ‘ n’est donc pas autorisée. Le mode des informations d’identification des demandes initiées par XMLHttpRequest est contrôlé par l’atsortingbut withCredentials.

Je ne suis pas sûr que ce que l’on entend par mode d’identification est «inclure» ?

Ainsi, lorsque j’exécute la demande dans le facteur, je n’éprouve aucune erreur de ce type:

entrez la description de l'image ici

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:

Demande de violoneux et réponse:

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

Violoneux

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

entrez la description de l'image ici

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 EnableCorsAtsortingbute("*", "*", "*") { 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 découle 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 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 que j’ai écrit il y a quelque temps.

Ainsi, vous pouvez définir avec withCredentials d’ withCredentials ou mettre en place 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.

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

Du côté angular, l’ajout de l’option flag withCredentials: true pour le transport de cookies a été withCredentials: true .

 constructor(public http: HttpClient) { } public get(url: ssortingng = ''): Observable { return this.http.get(url, { withCredentials: true }); }

Sur le serveur Java, il est nécessaire d’append CorsConfigurationSource pour la CorsConfigurationSource 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()

Si cela pouvait aider, j’utilisais censortingfuge avec mon application reactjs et, après avoir vérifié certains commentaires ci-dessous, j’ai consulté le fichier de bibliothèque censortingfuge.js, qui dans ma version comportait 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!