amazon s3 - habilitar - El punto final de AWS API Gateway da un error de CORS cuando POST desde un sitio estático en S3

preflight response

Question

He creado un punto final de API con Serverless (serverless.com) que expongo a través de API Gateway. Estoy recibiendo el siguiente error, aunque he habilitado CORS desde el

XMLHttpRequest no puede cargar https://xxxxxxxxx.execute-api.us-west-2.amazonaws.com/development/signup . No hay ningún encabezado ''Access-Control-Allow-Origin'' presente en el recurso solicitado. Por lo tanto, no se permite el acceso a Origin '' http://yyyyyyyyy.com.s3-website-us-east-1.amazonaws.com ''.

No obtengo ningún error cuando uso Postman para realizar solicitudes, a pesar de que haya configurado el encabezado de origin o no. ¿Como puedo solucionar este problema?

Answer 1

Comenzaría la solución de problemas al inspeccionar su API en la Consola de AWS para asegurarme de que Serverless haya registrado todo lo que espera.

1. Cargue la consola de AWS y navegue hasta el servicio de puerta de enlace API.
2. Haga clic en la API para abrirlo.
3. Encuentra tu / recurso de registro
4. Asegúrese de ver el método de OPCIONES en / registro

5. Haga clic en cada recurso, incluidas las opciones, y verifique lo siguiente:

   a. Haga clic en Respuesta de integración, haga clic en la flecha en la primera fila de la tabla para 200 para abrirla.

   segundo. Haga clic en la flecha para abrir Asignaciones de encabezado

   do. Asegúrate de ver Access-Control-Allow-Origin asignado a ''*''

Si encuentra que este encabezado falta en uno de los métodos, una solución rápida es hacer clic en el recurso / signup y hacer clic en el botón Habilitar CORS. AWS creará OPCIONES y las asignaciones de encabezados en todos los métodos para usted. Por supuesto, aún debe descubrir por qué Serverless no le preparó las cosas, pero al menos esto lo pondrá en marcha.

Otra nota sobre el botón Habilitar CORS, si agrega otro método más adelante, deberá hacer clic nuevamente para volver a ejecutar la herramienta y configurar su nuevo método con CORS.

Answer 2

Como señaló Jack Kohn, la consola de AWS no agrega los encabezados CORS en respuesta no 200, y aparentemente no le permite agregar ningún encabezado personalizado.

Pude habilitar los encabezados CORS en una solicitud fallida exportando a Swagger y editando manualmente el archivo (solo copié la respuesta 200) e importándolo de nuevo.

Las respuestas deben verse así:

  responses:
    200:
      description: "200 response"
      schema:
        $ref: "#/definitions/Empty"
      headers:
        Access-Control-Allow-Origin:
          type: "string"
    401:
      description: "401 response"
      schema:
        $ref: "#/definitions/Empty"
      headers:
        Access-Control-Allow-Origin:
          type: "string"
  x-amazon-apigateway-integration:
    responses:
      default:
        statusCode: "200"
        responseParameters:
          method.response.header.Access-Control-Allow-Origin: "''*''"
        responseTemplates:
          application/json: "__passthrough__"
      Authentication Failed.*:
        statusCode: "401"
        responseParameters:
          method.response.header.Access-Control-Allow-Origin: "''*''"
        responseTemplates:
          application/json: "__passthrough__"

Espero que esto ayude.

Answer 3

Estaba luchando con el mismo problema cuando ''POST'' a API Gateway. Pero encontré la solución para el problema.

Después de habilitar CORS para el recurso del método, y después de agregar los encabezados necesarios, por ejemplo, el comodín ''Access-Control-Allow-Origin'' = ''*'', y aún falla.

Vaya a las OPCIONES de ese recurso que está invocando, ''GET'', ''POST'', etc..haga clic en el panel "Solicitud de método" de ese recurso, configure API Key = FALSE, NO tenga la clave API configurada en true. Esto causará el error CORS.

Razón, OPCIONES técnicamente no es un método, es una función del navegador para ejecutar la solicitud Preflight, por lo tanto, durante la Preflight el navegador no sabe qué clave de API enviar, solo lo sabrá después de que la respuesta sea devuelta al navegador de ''Acceso -Control-Allow-Origin ''='' * ''luego buscará el código de la solicitud HTTP para establecer Headers de la X-Api-Key = algún valor.

Nota: el propio método de invocación, ''POST'', etc. puede tener la clave API = True, que está perfectamente bien.

Espero que esto ayude a aquellos que están luchando como yo lo hice por un tiempo :)

Answer 4

Estoy usando AWS SDK para las subidas, después de pasar un tiempo buscando en línea me topé con este hilo. Gracias a @lsimoneau 45581857 resulta que 45581857 exactamente lo mismo que estaba sucediendo. Simplemente señalé mi solicitud Url a la región en mi cubo adjuntando la propiedad de la región y funcionó.

 const s3 = new AWS.S3({
 accessKeyId: config.awsAccessKeyID,
 secretAccessKey: config.awsSecretAccessKey,
 region: ''eu-west-2''  // add region here });

Answer 5

La respuesta debería tener: Si está utilizando AWS lamda, configure los encabezados de respuesta de la siguiente manera. La configuración solo en la puerta de enlace API no funcionará

headers: {
            ''Content-Type'': ''application/json'', ''Access-Control-Allow-Origin'': ''*'',
        },

Answer 6

Necesitas habilitar CORS para todos los métodos. Significa, debe agregar debajo de tres encabezados para todos sus métodos

            "headers": {
            "Access-Control-Allow-Origin": {
                "type": "string"
            },
            "Access-Control-Allow-Methods": {
                "type": "string"
            },
            "Access-Control-Allow-Headers": {
                "type": "string"
            }
        }

Es una tarea tediosa agregar estos encabezados a todos sus métodos en JSON.

Creó una utilidad en Java que automáticamente agrega estos encabezados a Swagger JSON. Puede ejecutarlo antes de importarlo a la puerta de enlace API e importar el JSON de salida que tiene CORS habilitado en todos los métodos

https://github.com/anandlalvb/SwaggerToAPIGateway

Espero que esta utilidad pueda ayudar a cualquiera que busque esto a hacerlo fácilmente.

Answer 7

Tenía cerca el mismo problema, como lo publiqué en otra pregunta, necesitaba agregar los siguientes encabezados a mi respuesta:

headers: {
            ''Access-Control-Allow-Origin'' : ''*'',
            ''Access-Control-Allow-Headers'':''Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token'',
            ''Access-Control-Allow-Credentials'' : true,
            ''Content-Type'': ''application/json''
        }

Y, según esta documentación:

docs.aws.amazon.com/apigateway/latest/developerguide/…

Cuando utiliza el proxy para las funciones lambda en la configuración de la puerta de enlace de la API, los métodos de publicación u obtención no tienen encabezados agregados, solo el método de opciones. Debe hacerlo manualmente en la respuesta (respuesta del servidor o lambda).

Además de eso, tenía que deshabilitar la opción ''Clave de API requerida'' en mi método de publicación de la puerta de enlace API, como ya lo dijo alguien aquí.

Answer 8

Tenemos un error en este momento donde las solicitudes fallidas a la puerta de enlace API no incluyen los encabezados CORS apropiados, que enmascaran el error real en la solicitud.

Me gustaría agregar a lo que Ken dijo y asegurarme de que haya probado exhaustivamente la API y los recursos en la consola y también en la versión implementada utilizando Postman o algún otro cliente que no sea un navegador. Espero que haya un problema con la API en sí y que su configuración de CORS sea correcta.

Answer 9

Tengo este problema ... Habilito CORS, el trabajo de Prueba, ya que está enviando los encabezados, pero cuando lo llamo desde mi aplicación falla y no se encuentran encabezados en la respuesta.

es porque después de establecer CORS tienes que DESPLEGAR la API. Depliqué la API y todo funciona muy bien.