Ask: Azure free web app static - incorrect header check (gzip json)

Hi, i currently test this static app which load and process gzip json while i test on local and standard web server like apache it should be work but when i test deploy to Azure static web app i got an error "incorrect header check"
below is the code i test:
```
// Fetch the compressed GeoJSON data from new_data.gz
$.ajax({
url: '/special-reports/ground-truths/map/new_data.gz',
method: 'GET',
headers: { 'Content-Encoding': 'gzip' },
xhrFields: {
responseType: 'arraybuffer' // Set response type to handle binary data
},
success: function (compressedData) {
try {
// Log the raw data received for debugging
console.log("Compressed data received:", compressedData);

// Decompress the data using pako.ungzip
var decompressedData = pako.ungzip(new Uint8Array(compressedData), { to: 'string' });

// Parse the decompressed data as JSON
var geojson = JSON.parse(decompressedData);
console.log("GeoJSON data loaded successfully.");

// Process the GeoJSON data
processGeojsonData(geojson); // failed on this
} catch (error) {
// Log error details if decompression or parsing fails
console.error("An error occurred while processing the GeoJSON data:", error); //show error on this part with incorrect header check
}
}
});

function processGeojsonData(geojson) {
if (!geojson.groups) {
console.error("GeoJSON data does not contain 'groups' key.");
return;
}

let groups = geojson.groups;
let groupedFeatures = {};

for (let dn in groups) {
if (groups.hasOwnProperty(dn)) {
groupedFeatures[dn] = groups[dn].features;
}
}

let dnKeys = Object.keys(groupedFeatures);
let total = dnKeys.length;
let index = 0;
let batchSize = 50;

$('#progress-container').show();
$('#progress-bar').css('width', '0%').text('0%');

function processBatch() {
let start = index;
let end = Math.min(index + batchSize, total);

for (let i = start; i < end; i++) {
let dn = dnKeys[i];
let layerData = groups[dn].layer;

let rgbToHex = function (r, g, b) {
return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1).toUpperCase();
};

let randomColor = rgbToHex(parseInt(layerData.Red), parseInt(layerData.Green), parseInt(layerData.Blue));

let sourceId = 'source-' + dn;
if (!map.getSource(sourceId)) {
map.addSource(sourceId, {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': groupedFeatures[dn]
}
});
}

let layerId = 'polygonLayer-' + dn;
if (!map.getLayer(layerId)) {
map.addLayer({
'id': layerId,
'type': 'fill',
'source': sourceId,
'layout': {},
'paint': {
'fill-color': randomColor,
'fill-opacity': 0.5
}
});

if (map.getLayer('country labels')) {
map.moveLayer(layerId, 'country labels');
}
}

map.on('click', layerId, function (e) {
let dataLayer = groups[dn].layer;
let borderColor = `rgb(${dataLayer.Red}, ${dataLayer.Green}, ${dataLayer.Blue})`;

let popupContent = `

$('.mapboxgl-popup-content').addClass('bounce');
loadDetailedLayers(dn, borderColor);
});

console.log(`Group DN: ${dn}, Color: ${randomColor}`);
}

index = end;

let progress = (index / total) * 100;
$('#progress-bar').css('width', progress + '%').text(Math.round(progress) + '%');

if (index < total) {
setTimeout(processBatch, 0);
} else {
$('#progress-container').hide();
}
}

processBatch();
}
});
```
And for the staticwebapp.config.json:
```
{
"routes": [
{
"route": "/special-reports/ground-truths/map",
"serve": "/special-reports/ground-truths/map/index.html",
"statusCode": 200
}
],
"mimeTypes": {
".json": "application/json",
".gz": "application/gzip",
".woff": "font/woff",
".woff2": "font/woff2",
".js.gz": "application/javascript",
".json.gz": "application/json",
".html.gz": "text/html",
".css.gz": "text/css",
".ico.gz": "image/x-icon",
".svg.gz": "image/svg+xml",
".js.br": "application/javascript",
".json.br": "application/json",
".html.br": "text/html",
".css.br": "text/css",
".ico.br": "image/x-icon",
".svg.br": "image/svg+xml"
}
}
```
i'm kinda curious whether the error due wrong on my static config json, i tried to add below as well for global headers and encoding but keeps getting error build deserialize
```
"globalHeaders": {
"Content-Encoding": [
{
"fileMatch": ".gz",
"encoding": "gzip"
}
],
"Vary": [
{
"fileMatch": ".*",
"value": "Accept-Encoding"
}
]
}
```
Please feel free to share your thoughts and cmiiw - thank you