API gatewy CORS error

Question

I'm getting a CORS error when calling from the browser
"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."

and this is my response headers of option method
content-length: 23
content-type: application/json
date: Tue, 04 Apr 2023 07:30:44 GMT
via: 1.1 22746ff832b635f98716b999f6c6f002.cloudfront.net (CloudFront)
x-amz-apigw-id: C13FwH3WiGYFl2Q=
x-amz-cf-id: i0lRVplhYgs3cOjzG46aVgdHYm5OIReLUDPFJ98pc64LLRaX4uWT4Q==
x-amz-cf-pop: CDG50-P4
x-amzn-errortype: ForbiddenException
x-amzn-requestid: fba71b64-b5d7-4cb0-ab79-c78b3493c951
x-cache: Error from cloudfront

In aws console i tested my api, for option method i get response headers:
{"Access-Control-Allow-Headers":["Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token"],"Access-Control-Allow-Methods":["DELETE,GET,HEAD,OPTIONS,PATCH,POST,PUT"],"Access-Control-Allow-Origin":["*"],"Content-Type":["application/json"]}

how can i solve this problem

Accepted Answer

From your response it looks like you are getting an "ForbiddenException" when calling OPTIONS method.
I'm suspecting that you have some form of authentication enabled for the OPTIONS method, like API Key. The pre-flight is controlled by the browser and normally no authentication is added in the request header.

If this is your case, try and remove API Key or any other authentication from the OPTIONS method.

Answer

Thank you, I have solved my problem. Actually I made a mistake. I renamed the stage when I deployed the api. Cause I have been using the wrong api when using Amplify to call the api.

API gatewy CORS error

Relevant content