JavaScript Fetch API blocked by CORS policy due to gzip?

I am running into a CORS error and can not seem to find out why. After testing I think it has something to do with either CORS, headers, `app.api.binary_types.append("application/json")`, or a combination.
Can someone help? I have searched the web for a couple of hours, but can not seem to find the answer.

My Chalice app code:

```
from chalice import Chalice, Response
app = Chalice(app_name="myChaliceApp")
app.api.binary_types.append("application/json")
app.debug = True

@app.route("/some_test3", methods=["POST"], cors=True)
def some_test3():
request = app.current_request
data = request.json_body
blob = json.dumps(data).encode("utf-8")
payload = gzip.compress(blob)
custom_headers = {"Content-Type": "application/json", "Content-Encoding": "gzip"}

return Response(body=payload, status_code=200, headers=custom_headers)
```

My JavaScript code:
```
const url = "https://xxxx.execute-api.eu-central-1.amazonaws.com/api/some_test3"

const data = {
Test: 3
};

fetch(url, {
method: 'POST',
body: JSON.stringify(data),
headers: {
'Content-Type': 'application/json',
'Accept-Encoding': 'gzip'
}
})
.then((response) => response.json())
.then((data) => {
console.log('Success:', data);
})
.catch((error) => {
console.error('Error:', error);
});
```

Start at the `some_test3` route and the browser `fetch` call, then inspect the browser's preflight and response headers alongside the gzip response. Confirm whether the failure is caused by CORS, request or response headers, or binary JSON handling; done means a reproducible explanation and a documented configuration or code change.

Written by the indexing model from the issue text.