CORS Error when fetching tokenURIs provided by getNFTs() function

Iā€™m trying to fetch all of a userā€™s NFTs. To test, I have a user that has some NFTs that were minted on my marketplace and some that were purchased off of opensea (both on rinkeby testnet).

The getNFTs function does return an array of tokenURIs for all the userā€™s NFTs, however I get a CORS error when trying to fetch an NFTs metadata using the tokenURI (this seems to happen with NFTs from opensea).

For example, an NFT on minted on my marketplace has the tokenURI: https://ipfs.moralis.io:2053/ipfs/QmZQPMfos7iWV28HVEBNxHn8LLWph1hvAb7gHKCu3TKeQJ
This seems to work.

However some URIs from the openSea NFTs that donā€™t work are:
https://www.slackerduckpond.com/api/assets/20 and ipfs://QmNX4nsQQhQ8F3aB7EdSC8ja39du8RQ9YsX32S3bzM6y7g/0.json

An example of the error I get is:

Access to XMLHttpRequest at ā€˜https://www.slackerduckpond.com/api/assets/20ā€™ from origin ā€˜http://localhost:3000ā€™ has been blocked by CORS policy: No ā€˜Access-Control-Allow-Originā€™ header is present on the requested resource.

How do I get around this? Am I able to call getNfts() from inside a custom cloud function and use HttpRequest to get the metadata all on the server?

Hey @AlekRuzic

Please provide the token addresses to check and their chains.

If you want to try to fetch all my NFTs on rinkeby, my address is:
0x7a84ac83a8e54bd8f8bd79cfae12038c46b417a3

For the particular NFTs that gave me an error, here are two examples with more info:

{
amount: "1",
 contract_type: "ERC721",
 name: "Slacker Duck Pond",
symbol: "SDP",
token_address: "0xec516efecd8276efc608ecd958a4eab8618c61e8",
 token_id: "21",
 token_uri: "https://www.slackerduckpond.com/api/assets/21"
}

and

{
amount: ā€œ1ā€, 
contract_type: "ERC721ā€, 
name: "SuppressedUnicornsā€, 
symbol: "UNICORNā€, 
token_address: "0x8ab1c3385f40504120b4e68d4b76cca16ad28c27ā€,
 token_id: ā€œ0ā€,
 token_uri: ā€œipfs://QmNX4nsQQhQ8F3aB7EdSC8ja39du8RQ9YsX32S3bzM6y7g/0.jsonā€
}

Hey @AlekRuzic

You have this error because you trying to get data from third-party service with CORS.

Could you please share your code which you use to get NFTs metadata

Is there any update on this I am also facing the same issue, When I hit the metadata uri for postman it is returning me the data but when I send it through my app its giving me CORS error for not all but some mostly the ones that are hosted on open api

You could get CORS errors when testing on localhost, or when the url that you try to access doesnā€™t work and gives timeout. Fetching an url from a cloud function should work, or if you deploy your site on Moralis server. But if some urls donā€™t work and you get timeout then you would get those CORS errors from anywhere.

Thank you for such a quick reply, I didnā€™t look into the response of the API, the response already had the metadata of the nft in it. So It was unnecessary for me to make a request to get the metadata of the NFT. I was able to complete the feature I was working on. Thanks

1 Like

Mind sharing what you did? Thatā€™s my problem. Thanks,.