Preflight Request throwing an CORS error on AWS API Gateway

53 views Asked by At

I am learning about nuances of AWS hosting. I have relatively small app that works well on localhost, and in combination with Postman.

My setup is:

S3 hosted React app - with Cloudfront distribution in front of it

Serverless Node js application (Lambda) - with API Gateway in front of it

GET request works fine. Initially, i had CORS error there as well, but i managed to get past it.

I cannot get POST to work at all. I will provide several key screenshots, and i am willing to provide more if that will fix the issue.

here is my serverless.yml. Note that i have tried all sort of configuration within yml, this is latest state

functions:
  api:
    handler: server.handler
    events:
      - httpApi:
          path: /rsb/vote/{voteId}
          method: GET
      - httpApi:
          path: /rsb/vote
          method: POST
          cors:
            origin: '*'
            headers:
              - Content-Type
              - X-Amz-Date
              - Accept
              - Authorization
              - X-Api-Key
              - X-Amz-Security-Token
              - X-Amz-User-Agent
            allowCredentials: false

defined routes within API Gateway

Routes

CORS configuration (I masked Cloudfront distribution URL)

CORS configuration

Followed this tutorial, and also several other that i can find online https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html#apigateway-responding-to-cors-preflight

So, i created Lambda function and attached it to API Gateway route. Note that i have routes for {proxy+} in both root and /rsb namespace, just to be sure

Lambda function

Postman can hit the route correctly

Postman hitting the API - response body

However, i suspect that response headers are not good. And if i understand this correctly, Preflight will hit my API with OPTIONS, to test if url is valid. Despite me specifically writing inside handler what i want to use as header response.

Postman hitting the API - response headers

Also relevant, error message from browser, and response headers that are missing Allow Origin header CORS Error (replaced actual URL with dummy)

Access to fetch at 'apirul' from origin 'cloudfronturl' 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. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Response headers in browser

What are other configuration options that i should consider? Should i change Behaviour of Cloudfront distribution?

0

There are 0 answers