CORS: la modalità delle credenziali è "include"

Sì, so cosa stai pensando - ancora un'altra domanda CORS, ma questa volta sono perplesso.

Quindi, per iniziare, il messaggio di errore effettivo:

XMLHttpRequest non può caricare http: //localhost/Foo.API/token . Il valore dell'intestazione "Access-Control-Allow-Origin" nella risposta non deve essere il carattere jolly "*" quando la modalità delle credenziali della richiesta è "include" . L'accesso all'origine " http: // localhost: 5000 " non è pertanto consentito. La modalità delle credenziali delle richieste avviate da XMLHttpRequest è controllata dall'attributo withCredentials.

Non sono sicuro che cosa si intende per modalità credenziali sia "include" ?

Così, quando mi esibisco la richiesta in postino, provo nessun tale errore:

Ma quando accedo alla stessa richiesta tramite la mia app web angularjs, sono perplesso da questo errore. Ecco la mia richiesta / risposta angualrjs. Come vedrai la risposta è OK 200, ma ricevo ancora l'errore CORS:

Richiesta e risposta di Fiddler:

L'immagine seguente mostra la richiesta e la risposta dal front-end Web all'API

Quindi, in base a tutti gli altri post che ho letto online, sembra che io stia facendo la cosa giusta, ecco perché non riesco a capire l'errore. Infine, ecco il codice che utilizzo all'interno di angualrjs (login factory):

Implementazione di CORS nell'API - Scopi di riferimento:

Metodo 1 utilizzato:

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

Metodo 2 utilizzato:

public void Configuration(IAppBuilder app)
{
    HttpConfiguration config = new HttpConfiguration();

    ConfigureOAuth(app);

    WebApiConfig.Register(config);
    app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
    app.UseWebApi(config);

}

Molte grazie in anticipo!

Il problema deriva dal tuo codice Angular:

Quando withCredentialsè impostato su true, sta tentando di inviare credenziali o cookie insieme alla richiesta. Poiché ciò significa che un'altra origine sta tentando di eseguire richieste autenticate, il carattere jolly ("*") non è consentito come intestazione "Access-Control-Allow-Origin".

Dovresti rispondere esplicitamente con l'origine che ha effettuato la richiesta nell'intestazione "Access-Control-Allow-Origin" per fare in modo che funzioni.

Suggerirei di inserire esplicitamente nella whitelist le origini a cui si desidera consentire di effettuare richieste autenticate, perché semplicemente rispondere con l'origine dalla richiesta significa che qualsiasi sito Web può effettuare chiamate autenticate al proprio backend se l'utente ha una sessione valida.

Spiego queste cose in questo articolo che ho scritto tempo fa.

Quindi puoi impostare withCredentialssu false o implementare una whitelist di origine e rispondere alle richieste CORS con un'origine valida ogni volta che sono coinvolte le credenziali

Se stai utilizzando il middleware CORS e desideri inviare un valore withCredentialsbooleano true, puoi configurare CORS in questo modo:

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

"

Personalizzazione di CORS per Angular 5 e Spring Security (soluzione di base dei cookie)

Sul lato angolare è richiesta l'aggiunta di flag di opzione withCredentials: trueper il trasporto dei cookie:

constructor(public http: HttpClient) {
}

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

Sul lato server Java è richiesta l'aggiunta CorsConfigurationSourceper la configurazione dei criteri 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()...
    }
}

Il metodo configure(HttpSecurity http)predefinito utilizzerà corsConfigurationSourceperhttp.cors()

Se aiuta, stavo usando centrifuge con la mia app reactjs e, dopo aver controllato alcuni commenti di seguito, ho guardato il file della libreria centrifuge.js, che nella mia versione aveva il seguente frammento di codice:

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

Dopo aver rimosso queste tre linee, l'app ha funzionato correttamente, come previsto.

Spero che sia d'aiuto!

Se stai usando .NET Core, dovrai usare .AllowCredentials () durante la configurazione di CORS in Startup.CS.

All'interno di ConfigureServices

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

services.AddMvc();

Quindi all'interno di Configure:

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

Per me, erano specificamente solo le opzioni mancanti.AllowCredentials () che ha causato l'errore che hai menzionato. Come nota a margine in generale anche per gli altri che hanno problemi con CORS, l'ordine è importante e AddCors () deve essere registrato prima di AddMVC () all'interno della classe di avvio.