[SOLVED] CORS issues when fetching NFT metadata

Technical Issue Reporting
#1

Hello,

I would like to load the image from an NFT as a thumbnail in my NFT marketplace.

I have a Vercel test app that mints NFTs on Rinkeby. It serves the NFT metadata from an endpoint

Is Moralis able to fetch the token metadata in a reliable way? First i get… from my localhost Moralis React app.

"“No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”

And if i set {mode:‘no-cors’}, i get “App.js:56 Uncaught (in promise) SyntaxError: Unexpected end of input”

      const myNFTs = await Moralis.Web3.getNFTs(options);

  if (myNFTs.length > 0) {
    for (let nft of myNFTs) {
        console.log(nft.token_uri);
        fetch(nft.token_uri,{mode:'no-cors'}).then((data) => {
          console.log(data.json());
        };
      }
    }
  }

The above issue is obvious the CORS policy on Vercel. But this could also be the case with ANY OTHER NFT out there. How to avoid this issue?

My question is… Can Moralis reliably get NFT metadata? Or do we have to rely on fetch API etc?

Metadata can be accessed via the browser.
“https://nft-collection-sneh1999.vercel.app/api/1”

Please do not say this is a Vercel issue. This could also happen with any other endpoint hosting NFT metadata. How can i get a thumbnail for a NFT market place using Moralis?

Other users seem to use fetch reliably, i am wondering what to do when this is not possible.

“[SOLVED]Fetch token_uri returning undefined”

#2

now you can try to force resync for the metadata of an nft: https://docs.moralis.io/moralis-server/web3-sdk/token#resyncmetadata

you can also use it from https://admin.moralis.io/web3Api

the other option would be to fetch the metadata from a cloud function

#3

Thank you for your help.

The API calls were sufficient.

const result = await Web3Api.token.getTokenIdMetadata({
                address: nft.token_address,
                token_id: nft.token_id,
                chain: "rinkeby",
              });

Regards.

2 Likes