How to fix AWS Lambda & API Gateway cors Error

#help #aws #webdev #cloud

I have been working, with my client( developer ), in AWS Lambda & API-Gateway.

Now we face a cors error while calling API-endpoint in React-JS ( post method ), we tried lots of ways to fix the cors but doesn't work.

NOTE: This API endpoint works fine in postman. but throw cors only in React-JS applications.

Please Help me, anyone.

Thanks

In my code:

NOT WORK API - CORS ERROR: ( in react js )

Error:

Access to fetch at 'https://xxx_id_xxx.execute-api.us-east-1.amazonaws.com/xxxx/post/target/page' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.

Top comments (4)

Mykezero • Oct 13 '22

Sounds like you're missing something on the API Gateway side of things.

You'll need two API Methods for the CORS: OPTIONS and POST.

Options Method

For OPTIONS, you'll want to make sure that the Method Response section contains the following headers:

Access-Control-Allow-Headers
Access-Control-Allow-Methods
Access-Control-Allow-Origin

Next, you'll want to configure the Integration Response section for the OPTIONS method, to include the values

Access-Control-Allow-Headers: 'Content-Type'
Access-Control-Allow-Methods: 'OPTIONS,POST'
Access-Control-Allow-Origin: '*'

Post Method

For POST, you'll want to make sure that the Method Response section contains the following headers:

Access-Control-Allow-Origin

Next, you'll want to configure the Integration Response section for the POST method, to include the values:

Access-Control-Allow-Origin: '*'

With that in place, you should be able to call API gateway using Axios by doing the following:

import axios from "axios";

(async () => {
  const result = await axios.post("https://3xqqgy12ga.execute-api.us-east-1.amazonaws.com/Test/testwithcorsenabled", null, {
    headers: {
      "Content-Type": "application/json"
    }
  });
  console.log(result);
})().catch(e => {
});

Notice that 'Content-Type' was one of the allowed headers in the OPTIONS Integration Response section.

On success, the browser dev tools should show an OPTIONS request being fired and then a POST right after: