How can I get query strings in my Amazon S3 static website?

Question

I am hosting a static website on Amazon S3. Some of my client-side javascript parses the query strings to control the HTML. This works fine locally, but on the S3-hosted version, the query strings seem to get dropped from the request.

My motivation for using query strings is that I want to be able to pass state between pages based on what the user did on the previous page.

Is this approach possible? Did I violate the "static" requirement for S3 static websites?

I can't seem to find any mention of general query strings in the S3 docs, aside from the authentication stuff, which I don't think solves my problem.

Answer 1

If you are using index documents, where this...

http://bucket.example.com/foo

...actually displays the document at foo/index.html then your workaround will be to avoid the redirect that S3 does prior to displaying the index page.

For a link pointing to the page at /foo, you should actually create the link pointing to /foo/ instead (with the query string after the trailing slash; may look strange but it's quite valid). This is because when your browser requests a page that would result in an index document, but doesn't end in a trailing slash, S3 sends a redirect so that your browser has a trailing slash at the end of the URL. If not for this, relative links on that page would be referencing the wrong path.

The problem underlying the problem is that when S3 sends that redirect from /foo to /foo/, it strips the query string. They didn't have to design it that way, but that's what they did, and there does not appear to be a setting that modifies this behavior.

But if your link points directly to /foo/?some_thing=here&something_else=too instead of pointing to/foo?some_thing=here&something_else=too (no trailing slash before the ?) then the redirect is avoided and your query strings should stay intact.

Answer 2

You could switch to using an anchor/hash rather than a query string. For example, instead of

http://someS3domain.com?variable=1

you could use:

http://someS3domain.com#variable=1

The big difference between an anchor/hash versus a query string is that the query string is sent to the server and the anchor/hash is not. In your case, since you're using S3 for static hosting, you don't need the query string to be sent to the server anyways.

In Javascript, you can get the value of the anchor/hash string using:

window.location.hash