How to configure Query Params in AWS CloudFront

Question

I have an AWS cloudfront ahead of an S3 bucket that contains my frontend app ( https://myapp.com ). When I go to https://myapp.com/experts?profession=carpenter through the navigation elements of my site (button in this case) everything works fine. But when I try to access this same url by manually entering the url from the navigation bar of the browser the problem appears. The query params disappear and only in the navigation bar is the following url without the query params https://myapp.com.com/experts .

My question is, how should I configure AWS cloudfront to allow me to pass query parameters?

Many thanks!

Answer 1

For web distributions, you can choose whether you want CloudFront to forward query strings to your origin and, if so, whether to cache your content based on all parameters or on selected parameters.

By default, Cloudfront does not forward query strings, to improve the cache hit rate.

You can change that parameters in the behaviour definition, as per screenshot below.

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

Answer 2

Now AWS has a different way to setup this, which is selected by default. The method Sébastien has mentioned in his answer is marked as "Legacy cache settings"