CORS Pre-flight checks OPTIONS error from AWS Gateway API

I am struggling to resolve a '403' error: '... has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status'

Any advice on how I can debug or what I could be missing is appreciated

Tests conducted thus far:

My lambda function in AWS responds with the correct headers:

• OPTIONS CURL TEST:

• Copied failed axios command as CURL (cmd) from chrome dev tools : - (this does not work in command line, curl responds with: 'curl: (3) URL using bad/illegal format or missing URL' )

• Copied failed axios command as fetch from chrome dev tools:

• Online CORS Validator:

• And postman response to prove without cors, the functions works:

Other info:

• I have validated the url, x-api-key etc many times, and tried different configurations of the axios request, all result in the same response, see the following image of the axios request

• A few images from APIGateway showing the requests and integrations:

OPTIONS request/response in the browser (suggested by Quentin ):

My Current lines of reasoning:

• Maybe there is an additional security setting I need to define in my cloudwatch template?
• Maybe there is a bug in webpack with next.js / axios 0.27.2 / node 16.14.0 . - I have found a near- identical response mentioned HERE

The 403 error is due to the OPTIONS response x-api-key not being expected by the web browser for pre-flight checks

Once I disabled the global x-api-key required in the cloudformation template via:

Auth:
    ApiKeyRequired: false

The result as shown here; on the console depicts OPTIONS -> API Key 'Not Required'

-The response succeeded!

In conclusion, api-gateway interferes with the expected preflight process via it's default copnfiguration.
Be warned!

There is however a snag outside the scope of this question, in that multiple people have report difficulting enabled ApiKeyRequired for POST and not OPTIONS. This is a cloudformation issue (Please see linked sources below for more details)

UPDATE:

In conducting further research, enough people complained March 2022 with this exact problem, a specific flag 'AddApiKeyRequiredToCorsPreflight' was then added.

Example here

Discussion Sources:

• Defining CORS when ApiKeyRequired is true results in an OPTIONS method that requires an API key
• Function specific ApiKeyRequired Auth property does not override the global API default