Estoy casi completo con una nueva aplicación web, sin embargo, recibo un error 403 de API Gateway de AWS debido a un problema de COR.

Estoy creando una aplicación Vue y usando la biblioteca axios de Vue. Los COR están habilitados y la solicitud funciona con la opción API Key Required desactivada en API Gateway de AWS enviando lo siguiente:

    axios
      .get('My-URL-Endpoint',{headers: {})
      .then(response => (this.passports = response.data ));

Cuando enciendo la funcionalidad de clave de API requerida dentro de API Gateway de AWS. Funciona cuando uso Postman junto con la inclusión de x-api-key: My-API-Key. Sin embargo, el uso de axios de Vue no funciona y devuelve el error 403:

    axios
      .get('My-URL-Endpoint', {headers: { 
        'x-api-key': 'My-API-Key'
      }})
      .then(response => (this.passports = response.data ));

Mi primer instinto es que el problema está relacionado con cómo Axios envía la solicitud a través del navegador. Por lo que puedo deducir, parece que la verificación previa al vuelo está fallando porque recibo el siguiente error en el navegador:

El acceso a XMLHttpRequest en 'My-URL' desde el origen 'http: // localhost: 8080' ha sido bloqueado por la política de CORS: La respuesta a la solicitud de verificación previa no pasa la verificación de control de acceso: No 'Access-Control-Allow- El encabezado Origin 'está presente en el recurso solicitado.

Efectivamente, parece que no hay una clave de origen de permiso de control de acceso en la respuesta. Así que agregué access-control-allow-origin a la respuesta del mensaje 403 y obtuve un nuevo error "No tiene el estado HTTP ok".

¡He intentado casi todo para que esto funcione! Encontré respuesta de stackoverflow donde parece que la persona estaba sugiriendo que la funcionalidad de clave requerida de clave API no puede funcionar con COR. Este tipo de parece que no puede ser cierto. Sería una restricción bastante abrumadora.

Entonces, mi pregunta es cómo hacer que la verificación previa al vuelo del navegador funcione junto con los COR y la capacidad de clave API dentro de API Gateway de AWS.

¡Gracias!

-1
user3732456 24 ago. 2020 a las 01:39

1 respuesta

La mejor respuesta

Si ha habilitado cors en su puerta de enlace api, el siguiente lugar para buscar es el código de la aplicación, como lambda. Asegúrese de que Lambda esté devolviendo los encabezados de origen cruzado correctos tanto en situaciones de éxito como de falla.

En primer lugar, puede verificar si la solicitud está llegando a la lambda desde los registros de observación en la nube. Otra forma de verificar esto es apuntar temporalmente el destino de la puerta de enlace Api al punto final Mock.

Si el punto final simulado funciona, entonces el problema es el código de la aplicación. de lo contrario, el problema está en el punto final de la puerta de enlace de la API.

También tenga en cuenta que cualquier encabezado que use debe aparecer en la lista blanca en la sección Access-Control-Allow-headers cuando habilite cors para su método / recurso.

1
Arun K 24 ago. 2020 a las 22:46