Fetching NFT data gives CORS error

Moralis General
#1

I’m getting this cors policy error when fetching data for the first nft in a users wallet how can I bypass this?

All the users NFT’s show up in the console log and the website it is getting the NFT Json data from is correct when the error comes up just the CORS policy is keeping me from retrieving it.

Access to fetch 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.

const userEthNFTs = await Moralis.Web3.getNFTs();

            const nftCount = await Moralis.Web3.getNFTsCount();

            console.log(userEthNFTs);

            var nftboy =  userEthNFTs[0];

            let url = nftboy.token_uri

            fetch(url)

            .then(response => response.json())

            .then(data => {

            document.getElementById("nftboyname").innerHTML = data.name;

            document.getElementById("nftboyinfo").innerHTML = data.info;

            document.getElementById("nftboyimage").innerHTML = data.image;
#2

Can you share the error.
Maybe the CORS error is happening while fetching the URL at fetch(url)

#3

yes it is how would I go about fixing this? thank you

#4

Try this

#5

You may need to add proper header with cors mode.

#6

still brings up same error

#7

can you share the url which you are trying to fetch

#8

in the code let url = nftboy.token_uri is grabbing the url to where the NFT’s json data is it is a dynamic url depending on the wallet connected for the first NFT in that wallet I think I need a cloud function to bypass the CORS but now sure how to implement this

#9

can you share the complete cors error which you are getting

#10

how do you run that code, on your local server? what is the url that you use in your browser to access the application?

there is a way to fetch an url with a cloud function if you don’t find another solution

#11

I’m using http://localhost:3000

could you give me an example of what that would like for the cloud code using my code? I tried implementing it but I wasn’t able to figure it out thank you cryptokid

#12

You can do this in cloud functions: httpRequest - Moralis

#13

try to use 127.0.0.1:3000 instead of localhost, if that still not works, you can try this:

1 Like
#14

I’m having a problem implementing this if

let url = nftboy.token_uri

is my url how would the cloud code look? and how what would I add in my code to call that cloud code the documentation seems to be confusing me sorry

#15

tried this same error even deployed to a server same error I’m having trouble with the cloud code

#16

got it working you can close this now thanks fellas for all the help love you guys and love Moralis!

1 Like