amplify 403 comes up that too with a CORS error

Question

Through Amplify CLI added an API that invokes a lambda that reads the dynamo table.

It worked well y'day after the deployment in AWS. Today morning it throws 403 error with no changes being made:

GET https://xxnxxtfxx.execute-api.eu-west-1.amazonaws.com/Prod/items 403

Access to XMLHttpRequest at 'https://xxnxxtfxx.execute-api.eu-west-1.amazonaws.com/Prod/items' from origin ''http://myproject-20181130113531--hostingbucket.s3-website-eu-west-1.amazonaws.com'' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Observations/Actions

• Ensure CORS is enabled on API Gateway, redeploy the API.

• Testing API is successful from API Gateway, it invokes the Lambda function properly

• Amplify service does create the user object and is persisting in localstorage

• invocation of OPTIONS is looking good as well under developer tools:

  General Settings:

• Request URL: https://xxnxxtfxx.execute-api.eu-west-1.amazonaws.com/Prod/items

• Request Method: OPTIONS

• Status Code: 200

  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: *`

Wondering why would 403 come up that to with a CORS error. Any thoughts? what baffles and scares me is that a few hours after I wake up with no changes things are failing :-(

Polson

See this answer, this works for AWS S3 static hosting, CloudFront, Amplify, and other static website hosting sites. – Miserere

Answer 1

I had the same error (and follow the same actions). In my case, I wasn't passing the correct arguments in the Amplify post call by skipping the init argument. I fix this by passing a myInit argument with an empty body:

let myInit = {
    body: {}
}

API.post(apiName, path, myInit)

Electrojet

Answer 2

Here is your solution: https://serverless-stack.com/chapters/handle-api-gateway-cors-errors.html

The answer is that your response needs a the Access-Control-Allow-Origin and Access-Control-Allow-Headers in the header.

Unfortunately, when your API returns an error, it does not include these values in the header. You need to create a Gateway Response to enable these headers in your error responses.

Hope this helps : )

Ostyak