To resolve the issue where mobile users are being served the desktop version of the website, you need to forward the User-Agent header from CloudFront to your origin (ALB). This allows the origin to detect the type of device and serve the appropriate content.

Login to AWS Management Console:

Open the CloudFront console at Amazon CloudFront Console.

Select the Distribution:

Choose the CloudFront distribution you want to modify.

Update Cache Behavior Settings:

Go to the Behaviors tab.

Select the default behavior (or any specific behavior that you want to update) and choose Edit.

Forward Headers:

Under Cache Key and Origin Requests, choose Origin Request Policy.

Select Create Policy and include the User-Agent header in the policy.

Save the policy and apply it to the cache behavior.

This configuration ensures that the User-Agent header is forwarded to the origin, enabling it to serve different content based on the device type.

Configuring CloudFront to Forward Headers

Creating CloudFront Cache Behaviors