AWS api 403 Forbidden in S3, Cloudfront

Question

I've deployed a React application on S3 and a Spring Boot API on EC2, using CloudFront as a CDN. While I can access the static content (HTML, CSS) through CloudFront, I'm unable to fetch API data. Here's my setup:

• React frontend deployed to S3
• Spring Boot backend on EC2
• CloudFront distribution set up to serve S3 content and route API requests to EC2

When I send a request to ec2 server in postman, it works well. but when I send a request to cloudfront domain,

I get access denied error.

I can access the CloudFront domain URL and can see the HTML and CSS files but without the API data

I set CORS configuration in s3 as below

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "HEAD",
            "POST",
            "PUT",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "ETag",
            "Access-Control-Allow-Origin"
        ],
        "MaxAgeSeconds": 3000
    }
]

And I created OAC policy to block requests directly to s3. Only requests via Cloudfront are available.

It doesn't seem like a CORS error as it's an access denied error. Is there any setting I need to fetch API data?

Answer 1

For the request id, can you please check the cloudfromt access logs. That should be able to provide you more details.

Also, check the behavior defined within cloudfront, it seems that your request is being routed to S3 , and is getting access denied from there.