Resolviendo el error "Solicitar campo de encabezado Access-Control-Allow-Headers no está permitido por Access-Control-Allow-Headers"

En En un intento de rectificar el error inicial, se agregaron encabezados a la solicitud para permitir varios métodos y encabezados. Sin embargo, esto generó un nuevo error: "El campo de encabezado de solicitud Access-Control-Allow-Origin no está permitido por Access-Control-Allow-Headers".

Comprensión de CORS y solicitudes de verificación previa

El problema surge del hecho de que los navegadores envían una solicitud de OPCIONES de verificación previa para solicitudes de origen cruzado con ciertos tipos de contenido. De forma predeterminada, Angular envía datos con un tipo de contenido aplicación/json, lo que activa esta solicitud de verificación previa.

Respuesta y encabezados del servidor

El servidor debe permitir explícitamente el acceso. Encabezado Control-Allow-Headers en su respuesta para evitar el error. De lo contrario, el navegador interpretará que la respuesta no permite ningún encabezado.

Solución: modificar el tipo de contenido o la respuesta del servidor

Para resolver el problema, modifique el cliente o configuración del servidor:

1. Lado del cliente (Angular):

Sobrescriba el tipo de contenido Angular predeterminado en application/x-www-form-urlencoded, lo que no activa una solicitud de verificación previa:

$http.post(url, data, {
    headers : {
        'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
    }
});

2. Del lado del servidor:

Como alternativa, permita el encabezado Access-Control-Allow-Headers en el servidor. Se deben configurar los siguientes encabezados de respuesta:

• Access-Control-Allow-Origin: * o el origen específico (por ejemplo, https://example.com)
• Access-Control -Allow-Methods: GET, PUBLICAR, PUT, DELETE, OPTIONS
• Access-Control-Allow-Headers: todos los encabezados que el cliente envía en la solicitud (por ejemplo, tipo de contenido, autorización)