It took me awhile to realized it's not a CORS issue. I have Cognito authorizer setup with my API Gateway. I test with the my IDtoken using Postman, when the authorizer on my header is incorrect or the token is expired, postman response would tell me

{
    "message": "Unauthorized" 
}
{
        "message": "Token expired" 
   }

The problem is, in my dev/localhost; I would get the results correctly if the token is correct, but when the token is bad or expired, I get a CORs error. How do I set this up so I can handle the results correctly?

Access to XMLHttpRequest at '' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
xhr.js:210          POST  net::ERR_FAILED 403

It took me awhile to realized it's not a CORS issue. I have Cognito authorizer setup with my API Gateway. I test with the my IDtoken using Postman, when the authorizer on my header is incorrect or the token is expired, postman response would tell me

{
    "message": "Unauthorized" 
}
{
        "message": "Token expired" 
   }

The problem is, in my dev/localhost; I would get the results correctly if the token is correct, but when the token is bad or expired, I get a CORs error. How do I set this up so I can handle the results correctly?

Access to XMLHttpRequest at 'https://xcz3vfg4n7.execute-api.us-west-2.amazonaws./prod' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
xhr.js:210          POST https://xcz3vfg4n7.execute-api.us-west-2.amazonaws./prod net::ERR_FAILED 403

• javascript
• http-headers
• aws-api-gateway
• javascript-objects

Share Improve this question Follow asked Mar 3, 2022 at 20:22 Thaison NguyenThaison Nguyen 16122 silver badges1010 bronze badges 1

• Do you have custom or proxy integration configured in API Gateway? – eli6 Commented Mar 7, 2022 at 14:36

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

We ran into this same issue and since it was a painful to resolve, thought I would type up the solution.

Specifically we were receiving the CORs error via Axios in our React app, but not getting the error through cURL or Thunderclient (Postman-like extension for VS Code).

The resolution was actually missing headers on the "response" object from API Gateway.

Since cURL and Thunderclient/Postman don't care about CORs (because they server-based, not browser-based), those tools don't look for the 'Access-Control-Allow-Origin' header in the response.

We got back our preflight Options call 200 just fine, and then realized that the POST call was returning the 401 without an 'Access-Control-Allow-Origin' header.

Since the Authorizer is on the Method Request, it never goes past the Lambda proxy in the API Gateway and thus doesn't return full response headers.

So... the solution was actually really simple.

1. Go into "Gateway Responses"
2. Choose the "Unauthorized" option
3. Add the response headers (see screenshot)

IMPORTANT: Don't forget to "Redeploy" your API or the changes won't take effect

Example:

1. in client fetch request, use idToken.jwtToken , not accessToken.jwtToken to set Request.header.Authorization
2. Lambda function should be return in header "Access-Control-Allow-Origin": "*"
3. API Gateway must be "Enable CORS"
4. API Gateway must to config Gateway Responses → Unauthorized → Response header: '*' (as @Parker said)