Get NFTs & Display on website, Getting CORS Error

50% of NFTs load images on website successfully, but other 50% are receiving CORS error:

Error “Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://www.example.com/meta/1545?format=json. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 500.”

Why is this happening? Is there a problem with my code? Should I look into php curl workaround or is there an easier fix that I am overlooking?

<!DOCTYPE html>

  <head>

    <meta charset="UTF-8">

    <title>NFT Transfer</title>

    <script src="https://unpkg.com/moralis/dist/moralis.js"></script>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/web3.min.js"></script>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

  </head>



  <body>

    <h1>NFT Transfer</h1>

    <button onclick="login()" id="login">Connect Wallet</button>



    <script>

        const serverUrl = "https://5zx1ymh6jlif.usemoralis.com:2053/server";

        const appId = "UZOJLkAALMKRVfII40KCP50WEPybxRD5HM8O2TbB";

        Moralis.start({ serverUrl, appId });

        

        async function login(){

            const user = await Moralis.authenticate()

            document.getElementById('login').innerHTML = user.get('ethAddress')

            

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

            console.log(userEthNFTs);



            userEthNFTs.forEach(function(nft){
                let url = fixURL(nft.token_uri);

                fetch(url)
                    .then(response => response.json())
                    .then(data => {
                    $("#content").html($("#content").html()+"<h2>"+data.name+"</h2>");
                    $("#content").html($("#content").html()+"<img height='100' width='100' src='"+fixURL(data.image)+"'/>");
                });
            });   
        
        }


        
        function fixURL(url){
            if(url.startsWith("ipfs")){
                return "https://ipfs.moralis.io:2053/ipfs/"+url.split("ipfs://ipfs/")
            } 
else if(url.startsWith("data:")) {
                return null;
            }
 else {
                return url+"?format=json"
            }
        }
        



        


        async function userEthNFTs(){



        }


    </script>

you could try to fetch the nft info in a cloud function, you will find some example on other forum threads on how to do it, you can also try from a deployed website and not from localhost to see if you get the same CORS errors, sometimes you can get the CORS errors because that link doesn’t work any more

errors are also occuring when deployed on live server, and I have tried multiple servers and also tried a fresh moralis server - same CORS error

I have seen you reply to others using this same code to show NFTs on website, but their code showed NFTs from a specific address, not a connected wallet. You linked a youtube video, I used that video for this code. Not sure why I am receiving this error while others are not, leads me to believe it’s an undefined js issue or small syntax problem.

the CORS error is definitely happening on token uris that no longer propagate as originally intended, but it is also happening on a majority of correctly structured token uris that should be loadable

In any case thanks for the recommendations. I will look into a cloud function but I do not believe they used one in this video:

there was this tutorial that explains how to fix some cors errors: https://www.youtube.com/watch?v=2nF76NMQ9JA

can you give an example of like that gives cors errors? can you access that link directly?