AWS REST API Gives 403 : Access denied Error when using API Resource policy with Front End (HTML+Javascript)

Question

I am not sure what's the exact issue here but it would be very helpful if anyone can suggest me something here?

I have a post method AWS rest API ok and i have integrated it with AWS API Resource policy which allows all the ip addresses to access this API except for some specific ip addresses, below is the resource policy that i am using.

This whole setup works absolutely fine when i test it with POSTMAN or some Python script running on any IDE but when i integrate this POST API with my front end that is HTML + JAVASCRIPT it gives me 403 : Access Denied Error

below is the response of API to Browser:

content-length: 159
content-type: application/json
date: Sun, 13 Jun 2021 07:25:50 GMT
x-amz-apigw-id: A2jnxEQihcwFWaA=
x-amzn-errortype: AccessDeniedException
x-amzn-requestid: 8ca8eaa8-453e-44dd-a94a-ed5754aabf5f

Resource Policy used:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "execute-api:Invoke",
            "Resource": "arn:aws:execute-api:ap-south-1:xxxxxxxxxxx:yyyyyyy/*/POST/",
            "Condition": {
            "NotIpAddress": {
              "aws:SourceIp": ["192.191.12.44/32"]
            }
          }
        }
    ]
}

Answer 1

Any one coming here below was the reason for above failure, I was able to identify it. I missed the OPTIONS method to include in resource policy, below is the updated policy that one should use.

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": "*",
            "Action": "execute-api:Invoke",
            "Resource": ["arn:aws:execute-api:ap-south-1:xxxxxxxxxxx:yyyyyyy/*/POST/","arn:aws:execute-api:ap-south-1:xxxxxxxxxxx:yyyyyyy/*/OPTIONS/"],
            "Condition": {
            "NotIpAddress": {
              "aws:SourceIp": ["192.191.12.44/32"]
            }
          }
        }
    ]
}