Skip to content
By using AWS re:Post, you agree to the AWS re:Post Terms of Use
AWS re:Postre:Post
About re:Post

how to call backend api from frontend with domain

0

Hello, aws people I'm using route53 - cloudfront - s3/alb - ecs. I signed up for route53 because I wanted to use the domain. My domain is web.example.com But I have a problem. I tried to call web.example.com/api/* when calling backend api on the front end but it didn't work. I set the default value for cloudfront operation to s3 and /api/* to alb. However, a 502 bad gateway error appeared when calling backend api (get, post, etc.). What am I supposed to do?

Additional) So I created a domain for the backend and registered with route53 and cloudfront. It worked out to call the domain like back.example.com . What is the problem and how do I solve it?

Topics
Networking & Content DeliveryContainers
Tags
Amazon Route 53Amazon CloudFrontApplication Load BalancerAmazon Elastic Container Service
Language
English

asked a year ago242 views

1 Answer
0

To properly call your backend API from your frontend using the same domain, there are several aspects to check and configure correctly:

  1. CloudFront Path Pattern Configuration:
  • Ensure your CloudFront distribution has the correct path pattern for API requests (/api/*) pointing to your ALB origin
  • Verify the path pattern is case-sensitive and matches exactly what your frontend is requesting
  1. Origin Configuration:
  • Check that the ALB origin in CloudFront is correctly configured with the proper domain name
  • Ensure the origin path is empty if your API doesn't require a base path
  • Verify that the ALB's security groups allow traffic from CloudFront
  1. Cache Behavior Settings:
  • For API requests, you should disable caching or use appropriate cache settings
  • Configure proper origin request policies to forward all necessary headers, cookies, and query strings
  • Set appropriate TTL values (often 0 for APIs that need fresh responses)
  1. CloudFront Cache Invalidation:
  • If you've made changes to your configuration, try invalidating the CloudFront cache for the /api/* paths
  1. API Gateway Integration (if applicable):
  • If you're using API Gateway behind your ALB, ensure it's properly configured to handle the requests
  1. Health Checks and Routing:
  • Verify that your ALB target groups have healthy targets
  • Check that your ECS services are running and properly registered with the ALB

Since you mentioned that creating a separate domain (back.example.com) worked, the issue is likely related to how CloudFront is routing the /api/* requests to your ALB. The 502 error suggests that CloudFront is either not correctly forwarding the requests to your ALB or your backend service is not properly handling the requests.

If you want to maintain a single domain approach (web.example.com for both frontend and API), ensure your CloudFront behavior for /api/* is correctly configured to forward all necessary headers and that your backend service is properly set up to handle requests coming through CloudFront.
Sources
Backend and Frontend on same domain Cloudfront error | AWS re:Post
Using CloudFront as a Non-Cached Backend Request Proxy | AWS re:Post

answered a year ago

You are not logged in. Log in to post an answer.

A good answer clearly answers the question and provides constructive feedback and encourages professional growth in the question asker.

Relevant content