CORS issue when viewing NFTs

I’m currently having the CORs issue when viewing a wallet’s NFTs using the function - await Moralis.Web3.getNFTs

I see this is a common issue and I can’t find a straight answer to this problem. I see a lot of people saying to use cloud functions, but I don’t understand how to implement this to the cloud (I am a coding noob).

Yes, I have watched the tutorial and I have read multiple forums.

This is my code. I’ve attached comments to show where I’m at

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <!-- Moralis SDK code -->
    <script src='https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js'></script>
    <script src='https://unpkg.com/moralis/dist/moralis.js'></script>
</head>

<body>
    <h1>NFT Demo</h1>

    <div id="content"></div>

    <script>
        // connect to Moralis server
        const serverUrl = "************************";
        const appId = "*********************";
        Moralis.start({ serverUrl, appId });

        async function getNFTs() {
            const options = { chain: 'eth', address: '0xA2e8777EAA907201a4f4C91bC62959435b489Dc4' };
            const nfts = await Moralis.Web3.getNFTs(options);

            console.log(nfts);
            //when console.log gets metadata fine, after that gets CORS kicks in

            // I'm assuming I have to pass this into the cloud but not sure how to structure it. 
            nfts.forEach(function (nft) {
                let url = fixURL(nft.token_uri);

                fetch(url, { headers: { 'mode': 'opaque', 'Access-Control-Allow-Origin': '*' } })
                    .then(response => response.json())
                    .then(data => {
                        $("#content").html($("#content").html() + "<h2>" + data.name + "</h2>");
                        $("#content").html($("#content").html() + "<h3>" + data.description + "</h3>");
                        $("#content").html($("#content").html() + "<img width=100 height=100 src='" + fixURL(data.image) + "'/img");
                    });

                console.log(url);

            })
        }



        function fixURL(url) {
            if (url.startsWith("ipfs")) {
                return "https://ipfs.moralis.io:2053/ipfs/" + url.split("ipfs://ipfs/").slice(-1)[0];
            }
            else {
                return url + "?format=json"
            }
        }

        getNFTs()
    </script>
</body>

</html>

Thank you for your input and helping a noob out!

try to replace this with https://gateway.moralisipfs.com/ipfs/

Thank you for the response, but no luck.


maybe those urls are not accessible any more now, does it work to open it in browser directly?

Do you mean the NFTs metadata URL? Here are two links the code spit out:

https://www.realsharkcove.com/api/token-metadata/487?format=json

https://ipfs.moralis.io:2053/ipfs/QmTfh19epr5BTeq5Qv4CF3M1ughVHgd7DYS37nfdRHbMF5/1214.json?format=json

They work on my end. Attached is a screenshot of the second URL

Like I mentioned, I can pull in all the data I need via console log. I just get the CORs error when actually feeding it into the website

this one doesn’t depend on us: https://www.realsharkcove.com/api/token-metadata/487?format=json

this one https://ipfs.moralis.io:2053/ipfs/QmTfh19epr5BTeq5Qv4CF3M1ughVHgd7DYS37nfdRHbMF5/1214.json?format=json
can be replaced with https://gateway.moralisipfs.com/ipfs/QmTfh19epr5BTeq5Qv4CF3M1ughVHgd7DYS37nfdRHbMF5/1214.json?format=json

there is a work around to fetch the url in a cloud function.
sometimes you should also have that data already present as metadata in the specific NFT info

I understand what you are saying and I think have gotten it under control. My only problem now is fetching the image.

I used a different wallet address to pull different NFTs and successfully loaded the name and description just not the image.

those errors still seem to be related to metadata as it seems to be format=json there

I had similar issues displaying NFTs in my project using the Moralis API (direct endpoints, not SDK though) where some NFTs didn’t want to display due to CORS errors. I had to use the Allow Cors Chrome extension to get around this initially until I moved my fetching code to a backend Node.js/Express server. Most of these issues weren’t Moralis specific. Try deploying your site to something like Netlify to make sure it’s not an issue related to using a local server.

Is that an older syntax? E.g. current Moralis docs use Moralis.Web3API.account.getNFTs(options) as an example.

Cloud functions (if they’re referring to serverless functions) are related to running backend code in a different way so not relevant until you even get a backend set up.

I’ve deployed this to Netlifly and still no luck.

I’ve tried it with both syntaxes, the older one you see is just from me testing around.

there is this tutorial that could help you: