CORS preflight response error with AWS API gateway and Lambda function

Question

I've setup an AWS lambda function which returns some data and then an API gateway a POST method , and then setup API gateway pointing to it (no authorization).

I want to allow access from any origin. I believe I've setup my CORS headers and api gateway appropriately, but I'm still getting a preflight response error.

I've added the headers to the lambda function:

exports.handler = async (event) => {


return   { 
    statusCode: 200, 
    headers: { 
        "Access-Control-Allow-Headers": "*",
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Methods": "*",
        "Access-Control-Allow-Credentials": true,
        'Content-Type': 'application/json' 
    }, 
    body: JSON.stringify({})
}

};

In API gateway, I've enabled CORS which created the OPTIONS method for the preflight response using MOCK integration type.

I've confirmed my POST request works in postman.

However, on client side I get the preflight request error:

Access to fetch at '[API Gateway URL]' from origin 'MY WEBSITE' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Checking the network log, the OPTIONS endpoint is returning HTTP 500 error and I cant figure out what is wrong with my configuration in API gateway. The endpoint returns 200 when I test it in API gateway. Am I missing some configuration step to configure CORS?

Hi corycorycory, did you found any solution/alternative?

raheem.unr
– raheem.unr

2023-07-13 15:42:32 +00:00
Commented Jul 13, 2023 at 15:42 — raheem.unr
– raheem.unr, Commented Jul 13, 2023 at 15:42

raheem.unr · Accepted Answer · 2023-07-13 17:27:25Z

Finally, found the implementation steps from the the AWS API gateway docs. I integrated the same and it is working as expected.

As per docs, we have to create dedicated route to manage preflight request when we configured CORS in the API Gateway.

Here are the high level steps to "Configuring CORS for an HTTP API"

Create dedicated route with "OPTIONS" method
Route name should "/{proxy+}"
Make sure other route not configured with "ANY" method. Otherwise priority will go which the route configured with "ANY" method
Don't attach any authentication with the above route
Create dedicated lambda function for the route to return 200 response code and attach it in the integration of the route (refer the below screen shots)
Add the code like below in the lambda function

export const handler = async (event) => {
    const response = {
        statusCode: 200,
        headers: {
            "Access-Control-Allow-Headers" : "Content-Type",
            "Access-Control-Allow-Origin": "https://www.example.com",
            "Access-Control-Allow-Methods": "OPTIONS,POST,GET"
        },
        body: JSON.stringify('Hello from Lambda!'),
    };
    return response;
};

Please refer here for more about the headers.

FYR, Attached screenshot of the API Gateway route

Preflight Request Handler (Lambda function)

Preflight request success in the application

For more details about the implementation refer here.

About API routing refer here

Collectives™ on Stack Overflow

CORS preflight response error with AWS API gateway and Lambda function

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related