ReactJS Fetch failed to load json with unexpected end of input

Question

I am loading a json file from nginx server. The loading was working fine with reactjs public data.

But i just moved the data folder to different server which is using nginx

fetch(cdnUrl + "/data/content.json", { mode: 'no-cors' })
            .then(res => res.json())
            .then(result => {
                console.log('result is');
                console.log(result);
               
            }).catch(error => {
console.log(error);
            });

I think i must have configured the nginx wrongly. But i don't know exactly what is the problem

config

server {
        listen          80;
        listen          [::]:80;
        server_name     cdn.server;

        location / {
                root /home/ec2-user/cdn;
                index   index.html;
                log_not_found   off;
                access_log      off;
        }

# gzip
        gzip            on;
        gzip_vary       on;
        gzip_proxied    any;
        gzip_comp_level 6;
        gzip_types      text/plain text/css text/xml application/json application/javascript application/rss+xml application/atom+xml image/svg+xml;

}

I am getting the following error error SyntaxError: Unexpected end of input

But it was working fine before i move the json to nginx (same server it was working good)

response header

Content-Encoding: gzip
Content-Type: application/json
Date: Fri, 09 Oct 2020 08:11:42 GMT
ETag: W/"5f79f20f-548"
Last-Modified: Sun, 04 Oct 2020 16:02:23 GMT
Server: nginx
Vary: Accept-Encoding