Access to XMLHttpRequest at has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

Bugs
1

Hello, I don’t know why I am getting this error.

image
image1552×276 61.8 KB 

const auth = "Basic " + Buffer.from(projectId + ":" + projectSecretKey).toString("base64");

const client = create({
  host: "ipfs.infura.io",
  port: 5001,
  protocol: "https",
  headers: {
    authorization: auth,
  },
});

//Create NFTs
 const uploadToIPFS = async (file) => {
    try {
      const added = await client.add({ content: file });
      const url = `${subdomain}/ipfs/${added.path}`;
      return url;
    } catch (error) {
      console.log("Error Uploading to IPFS", error);
    }
  };


// Fetch NFTs
function fetchNFts(tokenId){
const tokenURI = await contract.tokenURI(tokenId);
 const {
            data: { image, name, description },
          } = await axios.get(tokenURI) ;
}
}
1 Like
2

Hi @rohitsutar082 ,

you seem to be accessing the file using the deprecated public Infura gateway: infura-ipfs.io

We have replaced our public gateway with dedicated gateways:
Public gateway - Infura Docs

The old public gateway redirects to ipfs.io, i.e. your CID is available at:
https://ipfs.io/ipfs/---CID---

It’s this redirection that is upsetting CORS.

Using a dedicated gateway or using ipfs.io directly should remove this error. Let me know if it does?

Warm regards,
Chris | Infura | ConsenSys

1 Like
3

Hi @chris.paterson,

You were right, I was accessing the file through the deprecated gateway.
The error is now resolved.
Thanks.

2 Likes