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/web3@latest/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!