0

I have an Nft contract and this is fetching on react.js

 const fetchNfts=async () => {
    const nfts = [] as Nft[];
    const onSaleNfts = await contract!.getAllNftsOnSale();
    for (let i = 0; i < onSaleNfts.length; i++) {
      const item = onSaleNfts[i];
      // debugger;
      const tokenURI = await contract!.tokenURI(item.tokenId);
      // this logs
      console.log("tokenUri is saved like this in blockchain", tokenURI);

      const metaRes = await fetch(tokenURI);

      let meta;
      try {
        meta = await metaRes.json();
      } catch (error) {
        console.log("error in json fetch", error);
      }

      nfts.push({
        price: parseFloat(ethers.utils.formatEther(item.price)),
        tokenId: item.tokenId.toNumber(),
        creator: item.creator,
        isListed: item.isListed,
        meta,
      });
    }
    console.log("nfts---", nfts);
    return nfts;
  }

this works in development:

enter image description here

as you see there is no error logged on console. However, I deployed the app on vercel and it does not fetch. I get CORS error:

Access to fetch at 'https://gateway.pinata.cloud/ipfs/QmdXNbfAarWxsnMRmDmqTVhCAxEmvUpCyEBjjofsK2ZcFT' from origin 'https://next-js-nft-marketplace-62jdxt8cv-yilmazbingo.vercel.app' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

enter image description here

I do not understand what causes cors block in production.

2
  • I am not 100% sure but it has some issue with the backend or server. CORS error usually comes from there. Commented Feb 13, 2023 at 4:29
  • I know cors error is server error but why it does not give me error on localhost
    – Yilmaz
    Commented Feb 13, 2023 at 4:57

1 Answer 1

0

This likely because you are using the Pinata Public Gateway gateway.pinata.cloud which are not recommended for production use. You may want to consider using a Dedicated IPFS Gateway as they are less prone to rate limiting and restrictions put on Public Gateways. They actually come with free plans now!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.