S3 hosted React app gets 405 Method Not Allowed - reactjs

Question

I have a react app hosted in S3. It is behind a Cloudfront CDN, which is reachable via a custom domain:
console.example.com -> CDN -> S3 hosted app
I also have a serverless application acting as my backend to handle API calls from the React app. This is also behind a Cloudfront CDN, which is reachable via a custom domain:
api.example.com -> CDN -> API Gateway
The front end is correctly configured to point to api.example.com. For the API Gateway, CORS is enabled.
When I navigate to the home page and attempt to login, console.example.com/login, I get the 405 Method Not Allowed error. Login, obviously using POST
I verified that the following curl is successful, when hitting the backend via API Gateway endpoint, Cloudfront Domain and the custom domain, effectively ruling out any API Gateway issue.
curl:
curl --header "Content-Type: application/json" \
--request POST \
--data '{"email":"name#test123.com","password":"xyz"}' \
https://api.example.com/login
In my research, I have found that S3 does not support POST. I have also found similar questions such as this and this, which were not helpful in my case unfortunately.
It is also worth noting that running my frontend and backend locally, works just fine, leaving me to think the S3 issue is my blocker here. But I'm not sure why. My POST endpoints are not trying to POST an object to the S3 bucket, they should be using the bundle.js file to hit the api endpoint.
So what am I missing? While I am not a frontend specialist, I assume others host react apps on S3 and can hit their api's just fine no?
I have intentionally not included the code as there would be a lot to digest there but am happy to include any that would be helpful, such as serverless.yml files or cloudformation templates etc. Any help would be awesome.
**** UPDATE - Added Cloudformation template for frontend Cloudfront CDN ****
Distribution:
Type: AWS::CloudFront::Distribution
Properties:
DistributionConfig:
Origins:
-
# Use the Website as the origin
DomainName: !GetAtt 'Website.DomainName'
Id: !Ref Website
CustomOriginConfig:
HTTPPort: 80
HTTPSPort: 443
OriginProtocolPolicy: https-only
Enabled: true
HttpVersion: http2
DefaultRootObject: index.html
CustomErrorResponses:
- ErrorCode: 404
ResponseCode: 200
ResponsePagePath: /index.html
- ErrorCode: 403
ResponseCode: 200
ResponsePagePath: /index.html
DefaultCacheBehavior:
AllowedMethods:
- DELETE
- GET
- HEAD
- OPTIONS
- PATCH
- POST
- PUT
DefaultTTL: 60
ForwardedValues:
QueryString: true
Cookies:
Forward: none
# The origin id defined above
TargetOriginId: !Ref Website
ViewerProtocolPolicy: "redirect-to-https" # we want to force https
# The certificate to use when using https
Aliases:
- console.example.com
ViewerCertificate:
AcmCertificateArn: arn:aws:acm:us-east-1:11111111:certificate/11111111-fa9b-4705-b9d2-11111111
MinimumProtocolVersion: TLSv1
SslSupportMethod: sni-only

Answer 1

I updated CustomErrorResponses to include 405 and I no longer get "405 Method Not Allowed" error:
CustomErrorResponses:
- ErrorCode: 405
ResponseCode: 200
ResponsePagePath: /index.html
- ErrorCode: 404
ResponseCode: 200
ResponsePagePath: /index.html
- ErrorCode: 403
ResponseCode: 200
ResponsePagePath: /index.html