'Why does fetching a gzipped file not work in localhost (with Javascript)?

I am utterly confused by gzipping ...

Situation:

I have a json-file with 2mb that I'd like to gzip.
It should work on the basic, cheap FTP server that my client has/uses
The file basically never changes, so I'd like to pre-gzip it and don't do it dynamically (also regarding 2.)

At first I thought I need a library like Pako, but then I read that it is supported natively by browsers.

I tried it with the following example:

example.json

{
    "this-is-a": "simple-json"
}

example.json.gz (created with zlib)

1f8b 0800 0000 0000 0013 abe6 5200 02a5
928c cc62 5d20 4a54 b252 502a cecc 2dc8
49d5 cd2a cecf 53e2 aa05 00f2 869a 6022
0000 00

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
  </head>
  <body>
    <script>
        fetchGzippedData('./example.json.gz')

        function fetchGzippedData(url){
            fetch(url).then(function (response) {
                return response.json()
            })
            .then(function (json) {
                console.log(json);
            })
            .catch(function(err) {
                console.error('Error loading file')
            });
        }
    </script>
  </body>
</html>

Result

The weird thing is it doesn't work on localhost (using serve or with Astro preview). It also doesn't work on my personal server, but it does work on my client's server.

So I assume it has to do with server configuration (which I have no experience with) ... but why doesn't it work in localhost?

javascript gzip

Solution 1:^[1]

Ok, I finally figured it out.

It fails because the the .gz-file's Response Header Content-Encoding is wrong or missing.
(This information can be viewed for the respective file in the Network-tab in the browser's debug tools.)

It has to be set to Content-Encoding : gzip

Once it's correct it can fetch and parse the json-file as it wasn't gzipped.

For the static site server serve I am using you can set options via a serve.json:
(But I also saw similar information for Apache)

{
  "headers": [
    {
      "source" : "**/*.@(gz|gzip)",
      "headers" : [{
        "key" : "Content-Encoding",
        "value" : "gzip"
      }]
    }
  ]
}

Side note: I noticed, that if you access the .gz-file via the browser directly:

If Content-Encoding is correct: The browser shows the file content
If Content-Encoding is not correct: The browser will download the file

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	st_phan