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
CORS configuration (I masked Cloudfront distribution URL)
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
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.
What are other configuration options that i should consider? Should i change Behaviour of Cloudfront distribution?