Uncaught (in promise) SyntaxError: Unexpected end of input after json fetch [duplicate]

Question

When I try to fetch JSON from Tibia API I am getting two things.

Error: tibia.js:8 Uncaught (in promise) SyntaxError: Unexpected end of input

Warning: Cross-Origin Read Blocking (CORB) blocked cross-origin response https://api.tibiadata.com/v2/characters/Burdeliusz.json

class Tibia {
    constructor() {}
    async getCharacter(char) {
        const characterResponse =
            await fetch(`https://api.tibiadata.com/v2/characters/${char}.json`, {
                mode: 'no-cors'
            });
        const character = await characterResponse.json();
        return {
            character
        }
    }
}

I searched similar questions, but I couldn't find the fix.

Any fetch request made with {mode:'no-cors'} will result in an opaque reply, which means you can't use res.json() or .text() or dot-anything. From MDN; In addition, JavaScript may not access any properties of the resulting Response. developer.mozilla.org/en-US/docs/Web/API/Request/mode — TJBlackman
– TJBlackman, Commented Aug 9, 2018 at 20:07
See my answer, you can access it using a proxy. See jsfiddle.net/RouzbehHz/b95vcdhm/2 (Give it a second, tibiadata.com has a pretty slow response) — Rouzbeh Hz
– Rouzbeh Hz, Commented Aug 9, 2018 at 20:22
Yeah, you'll need to use a proxy (boo... but works) or spin up your own backend server to get the data for you. If you just need it quick and dirty, go for the proxy. — TJBlackman
– TJBlackman, Commented Aug 9, 2018 at 20:26

Rouzbeh Hz · Accepted Answer · 2018-08-09 20:29:12Z

It's because the endpoint is not passing the right params in the response header.

Header should include:

"Access-Control-Allow-Origin" : "*", 
"Access-Control-Allow-Credentials" : true

I tested with Postman and the response had 8 headers: https://api.tibiadata.com/v2/characters/Burdeliusz.json

Connection →keep-alive
Content-Length →683
Content-Type →application/json; charset=utf-8
Date →Thu, 09 Aug 2018 20:05:30 GMT
Server →nginx/1.10.3
Strict-Transport-Security →max-age=63072000; includeSubdomains; preload
X-Content-Type-Options →nosniff
X-Frame-Options →DENY

Example of Access Control Allow Origin: https://api.spacexdata.com/v2/launches

Access-Control-Allow-Origin →*
CF-RAY →447cd76c595fab66-YYZ
Connection →keep-alive
Content-Encoding →gzip
Content-Type →application/json; charset=utf-8
Date →Thu, 09 Aug 2018 20:06:08 GMT
Expect-CT →max-age=604800, report-uri="https://report-uri.cloudflare.com/cdn-cgi/beacon/expect-ct"
Server →cloudflare
Set-Cookie →__cfduid=d1dce3c5d11de37f960c7b47dc4f7d6701533845168; expires=Fri, 09-Aug-19 20:06:08 GMT; path=/; domain=.spacexdata.com; HttpOnly; Secure
Strict-Transport-Security →max-age=15552000; includeSubDomains
Transfer-Encoding →chunked
Vary →Accept-Encoding, Origin
X-Cache-Status →EXPIRED
X-Content-Type-Options →nosniff
X-DNS-Prefetch-Control →off
X-Download-Options →noopen
X-Frame-Options →SAMEORIGIN
X-Response-Time →151ms
X-XSS-Protection →1; mode=block

You can try asking the tibiadata people to add the headers

OR

Use a proxy to access the endpoint: http://jsfiddle.net/RouzbehHz/b95vcdhm/2/

var proxyUrl = 'https://cors-anywhere.herokuapp.com/',
    targetUrl = 'https://api.tibiadata.com/v2/characters/Burdeliusz.json'
fetch(proxyUrl + targetUrl)
  .then(blob => blob.json())
  .then(data => {
    console.table(data);
    document.querySelector("pre").innerHTML = JSON.stringify(data, null, 2);
    return data;
  })
  .catch(e => {
    console.log(e);
    return e;
  });

You can recreate the proxy server:

git clone https://github.com/Rob--W/cors-anywhere.git
cd cors-anywhere/
npm install
heroku create
git push heroku master

Collectives™ on Stack Overflow

Uncaught (in promise) SyntaxError: Unexpected end of input after json fetch [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related