Al usar AWS re:Post, aceptas las AWS re:Post Términos de uso

API Gateway CORS issue using JS Fetch

0

I've seen this question asked a few times, but, there doesn't seem to be clear response.

I've got an API Gateway attached to a Lambda function, a get call to the API should return a value, in this case either 0 or 1.

In postman this works fine, but, when I try it in my deployed code (which is JS) the fetch call fails:

Access to fetch at '[APIGATEWAYURL]' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. (this also fails with a version in my s3 bucket.)

This answer: https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors-console.html shows an option to enable CORS, but I don't see that on my console...

preguntada hace 9 meses999 visualizaciones
1 Respuesta
2
Respuesta aceptada

Your Lambda function needs to return the right headers in the response, for example:

const responseHeaders = {
  'Content-Type': 'application/json',
  'Access-Control-Allow-Origin': '*',
};
const body = { 'userId': 13232 };
return {
  statusCode: 200,
  headers: responseHeaders,
  body: JSON.stringify(results),
};

You shouldn't have to configure CORS after you add those headers. But if you want to configure CORS on API Gateway then navigate to API Gateway in the console and click to open the API Gateway instance you want to change. Under details for that API Gateway open the side menu and make sure you are under resources, then you can enable CORS for a specific resource such as "/users". If you add methods then you'll need to add another header for Access-Control-Allow-Methods such as 'Access-Control-Allow-Methods': 'GET'.

AWS
respondido hace 9 meses
profile picture
EXPERTO
revisado hace 7 meses
profile picture
EXPERTO
revisado hace 9 meses
profile picture
EXPERTO
revisado hace 9 meses
  • Amazing - thank you.

  • Furthermore, it worked on Postman and not in the fetch call because Postman is a developer tool. It doesn't enforce CORS by default, so your request is treated as "SAME ORIGIN". Your browser is also a developer tool so if you test your API directly in the browser, it will work just fine BUT the scripts like js are treated differently by the browser and the requests made by a script are enforced with "CROSS ORIGIN" and hence it pops a CORS error.

No has iniciado sesión. Iniciar sesión para publicar una respuesta.

Una buena respuesta responde claramente a la pregunta, proporciona comentarios constructivos y fomenta el crecimiento profesional en la persona que hace la pregunta.

Pautas para responder preguntas