how - header('' access control allow origin*'') javascript

CORS: el modo de credenciales es ''incluir''

Question

Sí, sé lo que estás pensando, otra pregunta de CORS, pero esta vez estoy perplejo.

Entonces, para comenzar, el mensaje de error real:

XMLHttpRequest no puede cargar http://localhost/Foo.API/token . El valor del encabezado ''Access-Control-Allow-Origin'' en la respuesta no debe ser el comodín ''*'' cuando el modo de credenciales de la solicitud es ''incluir'' . Por lo tanto, el origen '' http: // localhost: 5000 '' no tiene acceso permitido. El modo de credenciales de las solicitudes iniciadas por XMLHttpRequest está controlado por el atributo withCredentials.

No estoy seguro de qué se entiende por modo de credenciales ''incluir'' .

Entonces, cuando realizo la solicitud en cartero, no experimento tal error:

Pero cuando accedo a la misma solicitud a través de mi aplicación web angularjs, me sorprende este error. Aquí está mi solicitud / respuesta de angualrjs. Como verá, la respuesta es OK 200 , pero sigo recibiendo el error CORS:

Solicitud y respuesta del violinista:

La siguiente imagen muestra la solicitud y la respuesta del front-end web a la API

Entonces, según todas las otras publicaciones que he leído en línea, parece que estoy haciendo lo correcto, por eso no puedo entender el error. Por último, aquí está el código que uso dentro de angualrjs (inicio de sesión de fábrica):

Implementación de CORS en API - Propósitos de referencia:

Método 1 utilizado:

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étodo 2 utilizado:

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

    ConfigureOAuth(app);

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

}

¡Muchas gracias de antemano!

Answer 1

El problema proviene de su código angular:

Cuando withCredentials se establece en true, intenta enviar credenciales o cookies junto con la solicitud. Como eso significa que otro origen está potencialmente tratando de hacer solicitudes autenticadas, el comodín ("*") no está permitido como el encabezado "Access-Control-Allow-Origin".

Debería responder explícitamente con el origen que realizó la solicitud en el encabezado "Access-Control-Allow-Origin" para que esto funcione.

Recomendaría incluir explícitamente en la lista blanca los orígenes que desea permitir para realizar solicitudes autenticadas, ya que simplemente responder con el origen de la solicitud significa que cualquier sitio web puede hacer llamadas autenticadas a su backend si el usuario tiene una sesión válida.

Explico esto en este artículo que escribí hace un tiempo.

Por lo tanto, puede establecer withCredentials en false o implementar una lista blanca de origen y responder a las solicitudes de CORS con un origen válido siempre que haya credenciales involucradas

Answer 2

Personalización de CORS para Angular 5 y Spring Security (solución base de cookies)

En el lado angular, se requiere agregar un indicador de opción con withCredentials: true para el transporte de cookies:

constructor(public http: HttpClient) {
}

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

En el lado del servidor Java, se requiere agregar CorsConfigurationSource para la política de configuración de 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()...
    }
}

El método configure(HttpSecurity http) por defecto usará corsConfigurationSource para http.cors()

Answer 3

Si está utilizando el middleware CORS y desea enviar con credencial boolean true, puede configurar CORS de esta manera:

var cors = require (''cors'');
app.use (cors ({credenciales: verdadero, origen: '' http: // localhost: 5000 ''}));

Answer 4

Si me ayuda, estaba usando una centrífuga con mi aplicación reactjs y, después de revisar algunos comentarios a continuación, miré el archivo de la biblioteca centruge.js, que en mi versión tenía el siguiente fragmento de código:

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

Después de eliminar estas tres líneas, la aplicación funcionó bien, como se esperaba.

¡Espero eso ayude!