Backend and Frontend on same domain Cloudfront error

Hello.

You’re using CloudFront to handle both your website (frontend) and your API (backend) on the same domain. To make this work you’ve set up CloudFront to forward all requests that start with** /api/*** to your API Gateway. However, when you try to access these API routes like /api/data you get an error, meaning CloudFront is not correctly sending the requests to the API Gateway.

Check Path Pattern

• the path pattern in CloudFront for the API is set as /api/*. CloudFront is case-sensitive, so double-check for any discrepancies between the path pattern and the requests.

Verify API Gateway Permissions

• CloudFront has permission to access your API Gateway. You might need to configure the API Gateway resource policy to allow CloudFront requests or set up an IAM role with the right permissions.

Clear CloudFront Cache

• CloudFront might have cached an incorrect response. Create a cache invalidation to force CloudFront to update.

aws cloudfront create-invalidation --distribution-id <your-distribution-id> --paths "/api/*"

Check API Gateway Stage

• If your API Gateway uses a stage like /prod, ensure that this stage is reflected in your CloudFront configuration. You may need to append /prod to the Origin Path in the CloudFront settings for API Gateway.

https://aws.amazon.com/blogs/networking-and-content-delivery/improve-single-page-application-spa-performance-with-a-same-domain-policy-using-amazon-cloudfront/#:~:text=One%20way%20to%20solve%20this%20issue%20is%20to,that%20can%20forward%20the%20requests%20to%20API%20Gateway.

https://repost.aws/knowledge-center/api-gateway-domain-cloudfront

Hey Minicode,

Check the Path Pattern:

• Ensure the /api/* path pattern is correct and matches what you expect in CloudFront. The pattern is case-sensitive.
• More details here: Using Cache Behaviors to Route Requests.

https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-web-values-specify.html#DownloadDistValuesPathPattern

Verify Permissions:

• Make sure that CloudFront has permission to invoke the API Gateway. You may need to configure the API Gateway’s resource policy to allow CloudFront access.
• You can learn more about setting up an API Gateway resource policy here: Controlling Access to API Gateway.

https://docs.aws.amazon.com/apigateway/latest/developerguide/apigateway-resource-policies.html

Invalidate CloudFront Cache:

• CloudFront might be caching a 404 response. Try invalidating the cache to ensure you’re seeing the latest responses from your API Gateway.
• Read more about invalidating cache here: Invalidating Files in CloudFront.

https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/Invalidation.html

Verify API Stage Configuration:

• If your API Gateway has a base path or stage (like /prod), ensure this is correctly handled in CloudFront. You might need to adjust the origin settings.
• For more details, see: Setting Up a Custom Domain Name for REST APIs.

https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-custom-domains.html