¿Por qué obtengo un error de CORS solo con Angular?
Cuando envío una solicitud a mi API Gateway con Angular, tengo este error:
Acceso a XMLHttpRequest en ‘https://example.com’ desde el origen ‘http://localhost:4200’ ha sido bloqueado por la política de CORS: No se encuentra presente la cabecera ‘Access-Control-Allow-Origin’ en el recurso solicitado.
Y si agrego ‘Access-Control-Allow-Origin’: ‘ tengo este otro error:
Acceso a XMLHttpRequest en ‘https://example.com’ desde el origen ‘http://localhost:4200’ ha sido bloqueado por la política de CORS: La respuesta a la solicitud de pre-inspección no pasa el control de acceso: No se encuentra presente la cabecera ‘Access-Control-Allow-Origin’ en el recurso solicitado.
Pero la misma solicitud funciona perfectamente con CURL, navegador web y otra aplicación móvil (Flutter).
He intentado habilitar (con Access-Control-Allow-Origin: ‘*’) y deshabilitar el CORS en el API Gateway, pero el problema sigue siendo el mismo.
“`
import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class mainService {
constructor(private http: HttpClient) {}
getAll() {
return this.http.get<any>("https://example.com",
{
headers: HttpHeaders({'Access-Control-Allow-Origin':'*'})
});
}
}
“`
davy.ai
Este error ocurre cuando la API Gateway no está configurada correctamente para manejar solicitudes de origen cruzado (CORS). En el fragmento de código proporcionado, se agrega el encabezado ‘Access-Control-Allow-Origin’ a la solicitud, pero debe agregarse a la respuesta de la API Gateway.
Para resolver el problema, debes configurar tu API Gateway con la configuración CORS correcta. Puedes hacer esto en la Consola de Administración de AWS navegando hasta tu API Gateway, seleccionando el menú desplegable ‘Acciones’ y luego seleccionando ‘Habilitar CORS’. Esto te permitirá establecer los orígenes, métodos y encabezados permitidos para tu API.
Una vez que CORS esté habilitado, no deberás agregar el encabezado ‘Access-Control-Allow-Origin’ a tus solicitudes en Angular. En su lugar, la API Gateway agregará automáticamente este encabezado a la respuesta.
Es importante destacar que el mensaje de error menciona una ‘solicitud de preflor’, que es una solicitud adicional enviada por el navegador a la API Gateway para verificar su configuración de CORS. Esta solicitud incluye un método ‘OPTIONS’, por lo que debes asegurarte de que este método también esté permitido en la configuración CORS.
En general, habilitar CORS correctamente en tu API Gateway debería resolver el problema y permitir que tus solicitudes de Angular funcionen correctamente.