24

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!

AlejoDev
  • 4,345
  • 9
  • 36
  • 67
  • 1
    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). – Michael - sqlbot Mar 03 '19 at 22:42

2 Answers2

24

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.

screenshot

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

Sébastien Stormacq
  • 14,301
  • 5
  • 41
  • 64
  • 2
    Now (12/2021) AWS has a *different* way to manage this as per the @lahiru-chandima answer. – emaV Dec 06 '21 at 02:06
22

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"

enter image description here

Lahiru Chandima
  • 22,324
  • 22
  • 103
  • 179
  • so we should choose Cache poilcy and origin request policy and select AllViewer? – Chau Giang Aug 11 '21 at 18:07
  • 2
    @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. – Lahiru Chandima Aug 12 '21 at 00:42
  • 3
    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. – Josh Weston Sep 17 '21 at 14:31
  • The new settings didn't work for me, I had to switch to the old for query strings to actually get forwarded. – Salami Apr 07 '22 at 21:19
  • @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? – EternalObserver Sep 04 '22 at 16:28
  • @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 – fayas_akram Sep 15 '22 at 04:22
  • 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. – Felix Livni Dec 02 '22 at 23:45