axioscorsblockchainethereumipfs

I get CORS error when I try to access metadata stored on IPFS

I am trying to fetch the metadata I stored on NFT.storage using axios, but each time I get this error:

Access to XMLHttpRequest at 'ipfs://bafyreib6hf354pwtnwxdmfllegogffvkv2dzsrgbithvjbzzewu757bxay/metadata.json' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.

I have solved this issue many times when I used to do web2 development but don't know how to do this here.

Solution

  • You cannot directly access ipfs:// prefixed content from a normal browser or js. Instead, you'd have to access it through a gateway.

    Some popular gateways are ipfs.io, pinata, moralis..

    This is an example usage of an ipfs gateway: https://ipfs.io/ipfs/bafyreib6hf354pwtnwxdmfllegogffvkv2dzsrgbithvjbzzewu757bxay/metadata.json

    Try making your axios request to this url