Requests can't be served when sending requests to cloudfront alternate domain name

Question

I have my backend app running in ECS task ,Requests are sent from client to a cloudfront distribution with load balancer configured as origin, Which In turn forward requests to ECS Task target group , I have created a subdomain In route53 from my base domain , And set up an acm certificate to hold this subdomain , The thing is whenever I send requests to cloudfront distribution directly i.e. .cloudfront.net the request is successful , and also when sending requests directly to the dns name of the load balancer on the registered port , The request is also  successful , But when sending requests to the alternate domain name i have set in Route 53 , the request never reach , and by investigating the cloudfront logs i can see 
 
> "x-edge-response-result-type": "Error",
 "x-edge-detailed-result-type": "OriginCommError",
  "x-edge-result-type": "Error",
 
and I can see the following errors too from the browser console

> Access to XMLHttpRequest at '' from origin 'https://' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
Failed to load resource: net::ERR_FAILED

I don't understand why the request fail when sending request through the alternate domain name.
I have made sure to assoicate the alternate domain name with the cloudfront distribution , the acm certificate include my domain name , the A record in Route 53 is pointing to the cloudfront distribution ID

Mahmoud · Accepted Answer

Thank you So Much , It turned out that there was no proplem in the CORS itself , But a misconfigured subnet in the loadbalancer (origin) ,One of the subnets configured for the load balancer in one of the availability regions was a private subnet. And this explains why sometimes client requests were successful ,But the majority were failed requests due to OriginCommError as in the logs of cloudfront.

Henrique Santana · Answer

To resolve the CORS (Cross-Origin Resource Sharing) policy error in CloudFront, you need to take the following steps:

First, verify that your origin server has a proper CORS policy set up. If you don't receive the Access-Control-Allow-Origin header in the response, [it means the origin server isn't correctly configured for CORS](https://repost.aws/knowledge-center/no-access-control-allow-origin-error).

For troubleshooting, you can verify if your CORS policy is working by using the curl command to test the response headers . If you make any changes to your distribution settings, remember to invalidate the cache to clear previously cached responses.

One important detail to note is that when configuring the Access-Control-Allow-Origin header, avoid using a trailing slash (/) in the domain name as this can cause CORS errors.

re:Post Agent · Answer

Based on the information provided, there are a few potential reasons why requests to the CloudFront alternate domain name are failing while direct requests to the CloudFront distribution and load balancer are successful:

1. SSL/TLS Certificate Mismatch: Ensure that the SSL/TLS certificate attached to your CloudFront distribution covers the alternate domain name you're using. The certificate must include the exact domain or a wildcard that matches the alternate domain name. If there's a mismatch, CloudFront will return an error.

2. Origin Configuration: Check that the origin domain name in your CloudFront distribution settings matches one of the domain names in the SSL/TLS certificate on your origin server (in this case, your Application Load Balancer). If they don't match, CloudFront may respond with a 502 Bad Gateway error.

3. CORS Configuration: The CORS error you're seeing suggests that your backend application (ECS task) is not configured to allow requests from the alternate domain name. You need to update your CORS settings in your backend application to include the alternate domain name in the list of allowed origins.

4. CloudFront Behavior Settings: Verify that your CloudFront distribution is configured to forward the necessary headers to the origin. This includes the 'Host' header and any custom headers required for your application.

5. DNS Propagation: If you recently updated your DNS settings, it may take some time for the changes to propagate. Ensure that enough time has passed since making the DNS changes.

6. Origin Protocol Policy: Check that the protocol policy in your CloudFront distribution matches what your origin (Application Load Balancer) expects. If your ALB requires HTTPS, make sure CloudFront is set to use HTTPS to communicate with the origin.

To resolve these issues:

1. Double-check your SSL/TLS certificate to ensure it covers the alternate domain name.
2. Verify the origin domain configuration in CloudFront matches your ALB's domain.
3. Update your backend application's CORS settings to allow requests from the alternate domain name.
4. Review your CloudFront behavior settings to ensure proper header forwarding.
5. Wait for DNS changes to propagate if recently updated.
6. Confirm the origin protocol policy in CloudFront matches your ALB's requirements.

If the issue persists after checking these points, you may need to review your CloudFront and ALB logs more thoroughly to identify any other potential issues.  
**Sources**  
[Use custom URLs by adding alternate domain names (CNAMEs) - Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/CNAMEs.html)  
[Origin HTTPS configuration - Secure Content Delivery with Amazon CloudFront](https://docs.aws.amazon.com/whitepapers/latest/secure-content-delivery-amazon-cloudfront/origin-https-configuration.html)  
[Troubleshooting distribution issues - Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/troubleshooting-distributions.html)  
[Distribution settings reference - Amazon CloudFront](https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/distribution-web-values-specify.html)

Requests can't be served when sending requests to cloudfront alternate domain name

Add your answer

Relevant content