'Uncaught (in promise) SyntaxError: Unexpected token in JSON at position 0 And 504 connection error to ipfs

I am trying to render NFTs I've created and am getting a 504 (timeout) error. This is very strange because it was working a while ago and I didn't actually change my code, so it is probably an issue with my ipfs node.

My code is:

let tokenMetadataURI = await contract.methods.tokenURI(tokenId).call()
console.log(tokenMetadataURI)
const tokenMetadata = await fetch(tokenMetadataURI).then((response) => response.json())
console.log(tokenMetadata)

The console.log(tokenMetadataURI) works fine, however the second part returns the 504 timeout. Very confusing error which appeared in dire moment.

The tokenMetadataURI is a regular "https://ipfs.io/ipfs/" URI which I am trying to fetch. This worked earlier this same day but now it is not working anymore.

Using response.text() returns the following (which takes a while).

<html>
<head><title>504 Gateway Time-out</title></head>
<body>
<center><h1>504 Gateway Time-out</h1></center>
<hr><center>openresty</center>
</body>
</html>
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->
<!-- a padding to disable MSIE and Chrome friendly error page -->


Sources

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

Source: Stack Overflow

Solution Source