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