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!

Shetrit

Side note: some query string parameters are reserved by S3, and new ones could be added that will cause issues with your application, since these are not intended for S3 but it will try to interpret any that match, now that you. Examples of common words that will break your application if used here are location and select. The recommendation if you are going to do this is to name your parameters beginning with x- but not x-amz, so, e.g. ?x-profession=carpenter is potentially more futute-proof (although, admittedly, "profession" seems like a word S3 is unlikely to need in the future). – Rudiment

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

Screeching

Now (12/2021) AWS has a different way to manage this as per the @lahiru-chandima answer. – Lowpitched

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"

Oscillogram

so we should choose Cache poilcy and origin request policy and select AllViewer? – Padova

@ChauGiang Setting origin request policy to AllViewer is sufficient to preserve the query parameters, but setting cache policy to Caching Disabled also makes sense if you are serving dynamic content where caching is not desired. – Oscillogram

In addition to the above, I also had to include a trailing slash to the requested resource. So, instead of .../newsletter/verify?id=1234, I had to use .../newsletter/verify/?id=1234. I believe this has to do with how S3 resolves the resource path, but I welcome a more concrete explanation. – Grummet

The new settings didn't work for me, I had to switch to the old for query strings to actually get forwarded. – Hexangular

@Lahiru Chandima So for my use case, I need to cache the content (mainly an HTML page) based on query-params. On the older setup, I just had to select the option "Forward all, cache based on all". What would be the correct way now? – Bagging

@JoshWeston I have a similar requirement just like that I have to re-write the query with a slash (/). Do you have any solution for that? Btw, the above solution only works for a default cache behavior. I want to create custom cache behavior for specif path /create --> point to s3 origin – Dibb

This answer is incorrect as it DISABLES all caching. So, you'll need to create a custom cache policy to cache based on query string. I'd recommend also creating a custom request policy to match; AllViewer forwards all headers, all query parameters, etc. Not enough space in a comment to give more details. If you don't want to create a custom policies, use the legacy option and follow the accepted answer. – Fanatical

Can we use the recommended option and still forward all query params? – Grillo

Answer 3

thanks to the hints from Sébastien Stormacq and Lahiru Chandima, also
Josh Weston's comment is correct: adding an extra '/' before query char '?' will resolve the issue.

but in my case, adding an extra char in url is hard to apply. eventually i resolve this issue by using following setting in the new ui.

Deleterious