How can I resolve a CORS POLICY error ( error code 400)

0

Hello! I am trying to do a process where I have client-side code(stored in my s3 bucket) that would call the API endpoint of an API gateway that I have created that would then invoke the lambda function and carry out the requested method. In this case its the POST method. The client side code is triggered from an html form submission. Everytime I try to submit the form, I get an error that says that my access to fetch from my API endpoint from the origin is blocked by the CORS policy. browser console error

I've configured all the CORS policies pertaining to my API Gateway, S3 Bucket, and even my Cloudfront distribution to allow origins from everywhere in addition to where it really comes from which is https://s3.amazonaws.com. The error still happens. If anyone as any insight that would be awesome. Thank you!

  • What is the Integration Request you have configured in API Gateway? Is it a proxy integration?

1 Answer
1

As you indicate, the problem seems to be related to the existing CORS policies in your API gateway. This ones should be configured to allow CORS request from your browser to the API via the S3 website. For that, the proper HTTP headers have to be sent by the browser in the preflight request (Detailed info in Mozilla CORS reference).

Please check the CORS documentation for API Gateway.

Specifically look at this two options (depend on the type of integration that you are using for your lambda), to ensure that you have properly set up your CORS configuration:

Enabling CORS support for Lambda or HTTP non-proxy integrations and AWS service integrations

For a Lambda custom (non-proxy) integration, HTTP custom (non-proxy) integration, or AWS service integration, you can set up the required headers by using API Gateway method response and integration response settings. When you enable CORS by using the AWS Management Console, API Gateway creates an OPTIONS method and attempts to add the Access-Control-Allow-Origin header to your existing method integration responses. This doesn’t always work, and sometimes you need to manually modify the integration response to properly enable CORS. Usually this just means manually modifying the integration response to return the Access-Control-Allow-Origin header.

Enabling CORS support for Lambda or HTTP proxy integrations

For a Lambda proxy integration or HTTP proxy integration, you can still set up the required OPTIONS response headers in API Gateway. However, your backend is responsible for returning the Access-Control-Allow-Origin and Access-Control-Allow-Headers headers, because a proxy integration doesn't return an integration response. Example code here.

If you need extra help, you can also check this CORS Troubleshooting guide.

profile pictureAWS
answered a year ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Guidelines for Answering Questions