NFTs Error after http requst - help!

2Tijan7N · September 28, 2021, 6:34pm

I added cloud function to fix CORS errors but now i am getting back this errors:

Code:

async function getSearchNFTs(){

    try{

        let address = await callAPI(document.getElementById('addressInput').value);

        console.log("in nfts, " + address);

        const nfts = await allNFTs(address);

        //Loop over the array

        if(nfts.length == 0){

            alert("Address invalid or it doesn't exist - try different one!")

            $("#searchResults").empty();

            $("#addressOrDomain").html("Address does not exsist, please try with another one!");

            $("#numOfNFTs").html("Address does not exsist, please try with another one!");

            $("#searchResults").html("<strong>Address does not have any NFTs, please try with other Address.</strong>");

            $("#searchResultsDiv").show();

            $("#searchAccordion").show();

        }else{

            $("#searchResults").empty();

            $("#numOfNFTs").val("");

            $("#addressOrDomain").val("");

            nfts.forEach(async (e) => {

                console.log(e);

                let url = e.token_uri;

                console.log(url)

                const params = { theUrl: url }

                const metadata = await Moralis.Cloud.run("fetchJSON", params);

                console.log(metadata);

                let data = metadata.data;

                    console.log(data)

                    let currentDiv = document.getElementById("searchResults");

                    let content = `

                    <div class="card" style="width: 18rem;">

                        <img src="${fixURL(data.image)}" class="card-img-top" id="img" alt="${data.name}">

                        <div class="card-body">

                            <h4 class="card-title">${data.name}</h4><hr>

                            <span class="card-text"><strong>Collection:</strong><span class="data">${e.name}</span><br>

                            <span class="card-text"><strong>Blockchain:</strong><span class="data">${e.chain}</span><br>

                            <span class="card-text"><strong>NFT Type:</strong><span class="data">${e.contract_type}</span></span>

                        </div>

                    </div>

                    `                    

                    currentDiv.innerHTML += content;

            })

            $("#addressOrDomain").html(address + ".");

            $("#numOfNFTs").html((nfts.length -1) + " NFTs.");

            $("#searchResultsDiv").show();

            $("#searchAccordion").show();

        }

    }catch (err) {

        console.log(err);

    }

}

Cloud code:

//HTTP Request:
Moralis.Cloud.define("fetchJSON", async (request) => {
  return Moralis.Cloud.httpRequest({
    method: "GET",
    url: request.params.theUrl,
  })
});

Yomoo · September 28, 2021, 5:13pm

Hey @2Tijan7N

Please make sure you use the latest version and share your server subdomain. There is a possible way how to fix it - visit the web3 api UI in admin panel https://admin.moralis.io/web3Api

2Tijan7N · September 28, 2021, 5:21pm

Server domain: https://8b7joefl1u7v.grandmoralis.com:2053/server
I have latest version of sdk inside head tags.

cryptokid · September 28, 2021, 5:25pm

It may have been a temporary problem for making http requests from cloud functions.
You can try again now or in 30 minutes maybe.

Yomoo · September 28, 2021, 5:27pm

You have an outdated server version. But yes, this could be the problem that @cryptokid mentioned

2Tijan7N · September 28, 2021, 5:31pm

I updated server version to 0.0.272 . I am still getting same errors. So code is written right but i need to wait ?

cryptokid · September 28, 2021, 5:38pm

If you run a simple could function like

Moralis.Cloud.define("fetchX", async (request) => {
  return "x";
});

then it works fine for you?

2Tijan7N · September 28, 2021, 5:41pm

yes it does

cryptokid · September 28, 2021, 5:44pm

ok, and if you run “fetchJSON” with a simple url?

2Tijan7N · September 28, 2021, 5:47pm

It works with some and for some not. Address that has 32 nfts for 29 nfts it was worknig for others not.
Example of working url:

cryptokid · September 28, 2021, 5:51pm

And an example that doesn’t work?

2Tijan7N · September 28, 2021, 5:55pm

URL: https://api.opensea.io/api/v2/metadata/matic/0x2953399124F0cBB46d2CbACD8A89cF0599974963/0xc73a2bd5ca07bc427fe7140a6720c84ec8daf7a5000000000000280000000064
Maybe it is because of api.opnsea.io ?

cryptokid · September 28, 2021, 5:56pm

maybe, I get {"success": false} when accessing that link from opensea

2Tijan7N · September 28, 2021, 7:03pm

I get the same too. Now that i am looking at failing urls they are mostly (or all) from api.opensea.io and from polygon
@cryptokid

2Tijan7N · September 28, 2021, 7:19pm

Also if i dont do cloud function but just a normal fetch those opensea urls are working. but some others are blocked by cors that with cloud function are working

cryptokid · September 28, 2021, 7:32pm

This one works for you with normal fetch:
https://api.opensea.io/api/v2/metadata/matic/0x2953399124F0cBB46d2CbACD8A89cF0599974963/0xc73a2bd5ca07bc427fe7140a6720c84ec8daf7a5000000000000280000000064?

2Tijan7N · September 28, 2021, 7:38pm

Right now it is very late for me so i will try it in 8h when i wake up

2Tijan7N · September 29, 2021, 5:27am

It doesn’t. Here is one other url that also doesnt work on fetch neither with httprequest:

URL: https://api.zed.run/api/v1/horses/metadata/62377
And this one is also api.
But if i fetch this url in my function (without trying httprequest) it works - i get img name, …:

async function getSearchNFTs(){

    try{

        let address = await callAPI(document.getElementById('addressInput').value);

        console.log("in nfts, " + address);

        const nfts = await allNFTs(address);

        //Loop over the array

        if(nfts.length == 0){

            alert("Address invalid or it doesn't exist - try different one!")

            $("#searchResults").empty();

            $("#addressOrDomain").html("Address does not exsist, please try with another one!");

            $("#numOfNFTs").html("Address does not exsist, please try with another one!");

            $("#searchResults").html("<strong>Address does not have any NFTs, please try with other Address.</strong>");

            $("#searchResultsDiv").show();

            $("#searchAccordion").show();

        }else{

            $("#searchResults").empty();

            $("#numOfNFTs").val("");

            $("#addressOrDomain").val("");

            nfts.forEach( e => {

                console.log(e);

                let url = e.token_uri;

                console.log(url)

                fetch(url)

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

                .then(data => {

                    console.log(data)

                    let currentDiv = document.getElementById("searchResults");

                    let content = `

                    <div class="card" style="width: 18rem;">

                        <img src="${data.image}" class="card-img-top" id="img" alt="${data.name}">

                        <div class="card-body">

                            <h4 class="card-title">${data.name}</h4><hr>

                            <span class="card-text"><strong>Collection:</strong><span class="data">${e.name}</span><br>

                            <span class="card-text"><strong>Blockchain:</strong><span class="data">${e.chain}</span><br>

                            <span class="card-text"><strong>NFT Type:</strong><span class="data">${e.contract_type}</span></span>

                        </div>

                    </div>

                    `                    

                    currentDiv.innerHTML += content;

                })

            })

            $("#addressOrDomain").html(address + ".");

            $("#numOfNFTs").html((nfts.length -1) + " NFTs.");

            $("#searchResultsDiv").show();

            $("#searchAccordion").show();

        }

    }catch (err) {

        console.log(err);

    }

}

0xff9ffdcfade903f9e8d9bc0b8f530948c05d097d - address i am testing with. It has a lot of those horses which are fetched with function above but not with cloud function httprequest.

cryptokid · September 29, 2021, 5:34am

https://docs.moralis.io/moralis-server/web3-sdk/token#gettokenidmetadata doesn’t work well for you?

2Tijan7N · September 29, 2021, 5:39am

Didnt tried it yet. It should work since i get all nfts in array. Will try it after school.