Cloning OpenSea NFT Boilerplate Questions

i seem to be getting the same error, maybe there is something else im missing

Error: A cross-origin error was thrown. React doesn’t have access to the actual error object in development. See for more information.

Could you try one more thing, it seems that when I paste the code in the forum it changes my quotation marks as seen in the image below. I get the same error as you, with the wrong quotation marks: so if you could try change them otherwise Im a bit stumped sorry…

Look at the video tutorial itself for example: (9:41)

There are several NFTs that for some reason don’t have any images showing. And I’m seeing the same kind of thing when I run the site myself… Not all of my NFTs show.

I could see that being a problem related to IPFS, but Opensea managed to pick up my NFTs fine, so I’m not sure what exactly is causing this.

nope same error

Error: A cross-origin error was thrown. React doesn’t have access to the actual error object in development. See for more information.

along with plenty of stack frames

Yes @ifelse, you could build such functionality yourself. You could store offer data on your Moralis server and send notifications to users if someone makes an offer on an NFT, to a user that is registered to the marketplace and holds that NFT. Your imagination is the limit to what you can build :wink:

and @mikeze Im Sorry I can have a look deeper and ask forward, but if it isn’t an error with the contractABI and you cant get it to work with even setting the contractABI to a simple string like in the image below, Im out of ideas as I cant replicate the error.

@Ioulaum sometimes there may be some errors indexing NFT images, but the Team are working on fixing these issues :), in the mean while you can manually fetch the images from the metadata as I have updated on the boilerplate repo:

1 Like

okay what about this issue, when i click on the a any of my added collections it gives this image

then after a minute it times out and gives me this

I’m getting this same issue too. Yours says Collection 0 but I do have 103 in mine and I get the same fetch error.

It happens on all 3 collections even though they all have a few hundred of items.

When working through the tutorial and I believe I completed everything buts synching the table, I get the following:

Any thoughts on this?

Yeah, i’m sure we will get an answer here in a few minutes. Moralis team is the best forsure.

it also happens in the your collection page

Hello, I sucessfully run the code but on Every NFT it shows me

If anybody know what I did wrong then let me know

This is most likely due to the indexing of NFTs still being fixed, so the dApp is resorting to the manual metadata fetch which can timeout! You can try limiting the fetch initially to fewer NFTs not the complete 100+ collection (this can be done in the token.getAllTokenIds() web3 API call.

I’ll go ahead and modify the boilerplate to combat for the “Failed to Fetch()” error for now, but this should all get fixed when we get an update for indexing of NFTs on Moralis side :+1:

hi @bataurus,

Looks like your line 7 in the MoralisDappProvider.js should be updated to:

const { web3, Moralis, user } = useMoralis();

Hope this helps!

I tried that and it didn’t work. So I investigated it a little further, and even tried axios instead of fetch…

So, for the token_uri (for example), the problem seems to be that access to the URL is being blocked by the CORS policy. Because they haven’t set the header [Access-Control-Allow-Origin: *]

What that likely means is that for consistency in getting NFT metadata, you’d likely need a proxy server that can fetch the information even if the domain that the information is on, doesn’t have a suitable CORS policy.

I assume Opensea itself doesn’t have this problem because they pull the data on the server side rather than on the client.

Edit #1: On further testing… There’s some inconsistency. Some of the Opensea URLs succeed and the other ones don’t.

It’s also possible that there’s a rate limiting issue of some kind happening here.

If it’s on the browser level, then I wonder if it’s the limit of total simultaneous connections to a domain.

Edit #2: So, I tested the page with your modifications, while also using a Chrome Extension to override the CORS policy, and now it succeeded… So it does look like it’s a CORS issue.

Moesif Origin & CORS Changer:

Edit #3: cors-anywhere on GitHub can create a basic proxy for APIs:

I commented out line 26 in its server.js to remove a restriction that was getting in the way of it working for me.

Could also use something like Apigee I assume, but that’s more work than I’m trying to put in right now.


alright ill try to figure that out lol

FYI, I get this error intermittently while working on a Testnet Moralis server:

Failed to load resource: the server responded with a status of 400 () https://my

So sometimes the data is loaded fine and sometimes it isn’t.

Edit: I think it may be happening more often when interacting with Rinkeby rather than the Mainnet.

It’s also a little surprising that an app that’s configured for Testnet works fine if I switch to Mainnet… Although I think that’s a good thing, as far as this testing experience goes, since the Opensea course uses collections that are on the Mainnet.

I thought I’d share my current workaround code for getting all the NFT images to work…

I’m using an API web proxy that I set up ( for when the initial load fails and that works. So, now we have a proof of concept.

Pastebin for the code:

useEffect(() => {
    async function fetchNFTs() {
      if (data?.result) {
      const NFTs = data.result;
      for (let NFT of NFTs) {
        if (NFT?.metadata) {
          NFT.metadata = JSON.parse(NFT.metadata);
          // metadata is a string type
          NFT.image = resolveLink(NFT.metadata?.image);
        } else if (NFT?.token_uri){
          try {
            await fetch(`${NFT.token_uri}`)
          .then(response => response.json())
          .then(data => {
            NFT.image = resolveLink(data.image);
          } catch (error) {
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data]);

… I’ll probably disable the proxy after a while, but you can test it out for now if you want to.


I don’t know the username of the person who did the YouTube video, but they should have some NFTs with this problem in their account since it was showing up in the video.

So they should be able to test this fix.

1 Like