ajax - headers - API Gateway CORS: sin encabezado ''Access-Control-Allow-Origin''

enable cors

Question

Aunque CORS se ha configurado a través de API Gateway y el encabezado Access-Control-Allow-Origin está configurado, sigo recibiendo el siguiente error cuando intento llamar a la API desde AJAX dentro de Chrome:

XMLHttpRequest no puede cargar http://XXXXX.execute-api.us-west-2.amazonaws.com/beta/YYYYY . No hay encabezado ''Access-Control-Allow-Origin'' presente en el recurso solicitado. Por lo tanto, el origen ''nulo'' no tiene acceso permitido. La respuesta tenía el código de estado HTTP 403.

Intenté OBTENER la URL a través de Postman y muestra que el encabezado anterior se pasó con éxito:

Y de la respuesta de OPCIONES:

¿Cómo puedo llamar a mi API desde el navegador sin volver a JSON-P?

Answer 1

En Python puedes hacerlo como en el siguiente código:

{ "statusCode" : 200,
''headers'':
{''Content-Type'': ''application/json'',
''Access-Control-Allow-Origin'': "*"
},
"body": json.dumps(
{
"temperature" : tempArray,
"time": timeArray
})
}

Answer 2

En mi caso, dado que estaba usando AWS_IAM como método de autorización, necesitaba otorgar mis permisos de rol de IAM para llegar al punto final.

Answer 3

En mi caso, simplemente estaba escribiendo mal la URL de solicitud de recuperación. En serverless.yml , establece cors en true :

register-downloadable-client:
handler: fetch-downloadable-client-data/register.register
events:
- http:
path: register-downloadable-client
method: post
integration: lambda
cors: true
stage: ${self:custom.stage}

y luego en el controlador lambda envía los encabezados, pero si hace que la solicitud de recuperación sea incorrecta en la interfaz, no obtendrá ese encabezado en la respuesta y obtendrá este error. Por lo tanto, verifique su URL de solicitud en el frente.

Answer 4

Encontré una solución simple dentro

API Gateway> Seleccione su punto final de API> Seleccione el método (en mi caso, fue la POST)

Ahora hay un menú desplegable ACCIONES> Habilitar CORS ... selecciónelo.

Ahora seleccione nuevamente las ACCIONES desplegables> Implementar API (vuelva a implementarlo)

Funcionó !

Answer 5

Estoy ejecutando aws-serverless-express , y en mi caso necesitaba editar simple-proxy-api.yaml .

Antes de que CORS se configurara en https://example.com , simplemente npm run setup el nombre de mi sitio y lo npm run setup a npm run setup través de npm run setup , y actualizó mi lambda / stack existente.

#...
/:
#...
method.response.header.Access-Control-Allow-Origin: "''https://example.com''"
#...
/{proxy+}:
method.response.header.Access-Control-Allow-Origin: "''https://example.com''"
#...

Answer 6

Otra causa raíz de este problema podría ser una diferencia entre HTTP / 1.1 y HTTP / 2.

Síntoma: Algunos usuarios, no todos, informaron que obtuvieron un error CORS al usar nuestro Software.

Problema: a veces faltaba el encabezado Access-Control-Allow-Origin .

Contexto: teníamos un Lambda en su lugar, dedicado a manejar la solicitud de OPTIONS y responder con los encabezados CORS correspondientes, como Access-Control-Allow-Origin coincide con un Origin lista blanca.

Solución: API Gateway parece transformar todos los encabezados a minúsculas para las llamadas HTTP / 2, pero mantiene las mayúsculas para HTTP / 1.1. Esto hizo que el acceso a event.headers.origin fallara.

Comprueba si también tienes este problema:

Suponiendo que su API se encuentra en https://api.example.com , y su front-end está en https://www.example.com . Usando CURL, haga una solicitud usando HTTP / 2:

curl -v -X OPTIONS -H ''Origin: https://www.example.com'' https://api.example.com

La salida de respuesta debe incluir el encabezado:

< Access-Control-Allow-Origin: https://www.example.com

Repita el mismo paso con HTTP / 1.1 (o con un encabezado de Origin minúsculas):

curl -v -X OPTIONS --http1.1 -H ''Origin: https://www.example.com'' https://api.example.com

Si falta el encabezado Access-Control-Allow-Origin , es posible que desee comprobar la distinción entre mayúsculas y minúsculas al leer el encabezado Origin .

Answer 7

Puse el mío en funcionamiento después de darme cuenta de que el autorizador lambda estaba fallando y por alguna razón desconocida que se estaba traduciendo en un error CORS. Una solución simple para mi autorizador (y algunas pruebas de autorizador que debería haber agregado en primer lugar) y funcionó. Para mí, se requería la acción API Gateway ''Habilitar CORS''. Esto agregó todos los encabezados y otras configuraciones que necesitaba en mi API.

Answer 8

Si alguien más se encuentra con esto todavía, pude rastrear la causa raíz en mi aplicación.

Si está ejecutando API-Gateway con Autorizadores personalizados, API-Gateway enviará un 401 o 403 antes de que llegue a su servidor. De manera predeterminada, API-Gateway NO está configurado para CORS cuando devuelve 4xx desde un autorizador personalizado.

Además, si obtiene un código de estado de 0 o 1 de una solicitud que se ejecuta a través de API Gateway, este es probablemente su problema.

Para corregir, en la configuración de API Gateway, vaya a "Respuestas de Gateway", expanda "Predeterminado 4XX" y agregue un encabezado de configuración CORS allí. es decir

Access-Control-Allow-Origin: ''*''

Asegúrese de volver a implementar su puerta de enlace , ¡y listo!

Answer 9

Si ha intentado todo lo relacionado con este problema en vano, terminará donde lo hice. Resulta que las instrucciones de configuración CORS existentes de Amazon funcionan bien ... ¡solo asegúrese de recordar volver a implementar ! El asistente de edición CORS, incluso con todas sus pequeñas marcas de verificación verdes, no realiza actualizaciones en vivo en su API. Quizás obvio, pero me dejó perplejo durante medio día.

Answer 10

Tengo el mismo problema. He usado 10 horas para averiguarlo.

https://serverless.com/framework/docs/providers/aws/events/apigateway/

// handler.js
''use strict'';
module.exports.hello = function(event, context, callback) {
const response = {
statusCode: 200,
headers: {
"Access-Control-Allow-Origin" : "*", // Required for CORS support to work
"Access-Control-Allow-Credentials" : true // Required for cookies, authorization headers with HTTPS
},
body: JSON.stringify({ "message": "Hello World!" })
};
callback(null, response);
};

Answer 11

Tengo mi muestra funcionando: acabo de insertar ''Access-Control-Allow-Origin'': ''*'', dentro de los encabezados: {} en la función Lambda generada por nodejs. No hice cambios en la capa API generada por Lambda.

Aquí está mi NodeJS:

''use strict'';
const doc = require(''dynamodb-doc'');
const dynamo = new doc.DynamoDB();
exports.handler = ( event, context, callback ) => {
const done = ( err, res ) => callback( null, {
statusCode: err ? ''400'' : ''200'',
body: err ? err.message : JSON.stringify(res),
headers:{ ''Access-Control-Allow-Origin'' : ''*'' },
});
switch( event.httpMethod ) {
...
}
};

Aquí está mi llamada AJAX

$.ajax({
url: ''https://x.execute-api.x-x-x.amazonaws.com/prod/fnXx?TableName=x'',
type: ''GET'',
beforeSend: function(){ $( ''#loader'' ).show();},
success: function( res ) { alert( JSON.stringify(res) ); },
error:function(e){ alert(''Lambda returned error/n/n'' + e.responseText); },
complete:function(){ $(''#loader'').hide(); }
});

Answer 12

1) Tenía que hacer lo mismo que @riseres y algunos otros cambios. Estos son mis encabezados de 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''
}

2) y

De acuerdo con esta documentación:

http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

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

3) y

Además de eso, necesitaba deshabilitar la opción ''API clave requerida'' en mi método de publicación de puerta de enlace API.