I'm getting Axios network error while trying to upload my nft to infura ipfs

1

[Axios infura cors](https://Axios infura cors)

3 Likes
2

Hi,

Can you provide more information about your issue? e.g.
Error message,
OS and tool versions,
Steps to reproduce,
The commands you used,
It’s especially useful to provide a link to your code.

Chris

2 Likes
3

infura error
infura error1920×1080 240 KB

2 Likes
4

here’s my create-item.js

import { useState } from ‘react’

import { ethers } from ‘ethers’

import { create as ipfsHttpClient } from ‘ipfs-http-client’

import { useRouter } from ‘next/router’

import Web3Modal from ‘web3modal’

import { create } from ‘ipfs-http-client’

//import { web3auth } from ‘web3modal/dist/providers/connectors’

// ADD THIS

// const { create } = require(‘ipfs-http-client’)

const projectId = process.env.NEXT_PUBLIC_INFURA_IPFS_PROJECT_ID

const projectSecret = process.env.NEXT_PUBLIC_INFURA_IPFS_PROJECT_SECRET

const projectIdAndSecret = ${projectId}:${projectSecret}

const auth = Basic ${Buffer.from(projectIdAndSecret).toString('base64')}

const client = create({

host: ‘ipfs.infura.io’,

port: 5001,

protocol: ‘https’,

headers: {

authorization: auth

}

})

import {

nftaddress, nftmarketaddress

} from ‘…/config’

import NFT from ‘…/artifacts/contracts/NFT.sol/NFT.json’

import Market from ‘…/artifacts/contracts/Market.sol/NFTMarket.json’

export default function CreateItem() {

const [fileUrl, setFileUrl] = useState(null)

const [formInput, updateFormInput] = useState({ price: ‘’, name: ‘’, description: ‘’ })

const router = useRouter()

async function onChange(e) {

const file = e.target.files[0]

try {

    const added = await client.add(file, {

        progress: (prog) => console.log(`received: ${prog}`),

    })

    const url = `https://nftmarket007.infura-ipfs.io/ipfs/${added.path}`

    //https://nftmarket007.infura-ipfs.io

    client.pin.add(added.path).then((res) => {

        console.log(res)

        setFileUrl(url)

    })

} catch (error) {

    console.log('Error uploading file: ', error)

}

}

async function createItem() {

const { name, description, price } = formInput

if (!name || !description || !price || !fileUrl) return

/* first, upload to IPFS */

const data = JSON.stringify({

  name,

  description,

  image: fileUrl,

})

try {

  const added = await client.add(data)

  const url = `https://ipfs.infura.io/ipfs/${added.path}`

  // after file is uploaded to IPFS, pass the URL to save it on Polygon

  createSale(url)

} catch (error) {

  console.log('Error uploading file: ', error)

}

}

async function createSale(url) {

const web3Modal = new Web3Modal()

const connection = await web3Modal.connect()

const provider = new ethers.providers.Web3Provider(connection)    

const signer = provider.getSigner()



/* next, create the item */

let contract = new ethers.Contract(nftaddress, NFT.abi, signer)

let transaction = await contract.createToken(url)

let tx = await transaction.wait()

let event = tx.events[0]

let value = event.args[2]

let tokenId = value.toNumber()

const price = ethers.utils.parseUnits(formInput.price, 'ether')



/* then list the item for sale on the marketplace */

contract = new ethers.Contract(nftmarketaddress, Market.abi, signer)

let listingPrice = await contract.getListingPrice()

listingPrice = listingPrice.toString()

transaction = await contract.createMarketItem(nftaddress, tokenId, price, { value: listingPrice })

await transaction.wait()

router.push('/')

}

return (

<div className="flex justify-center">

  <div className="w-1/2 flex flex-col pb-12">

    <input

      placeholder="Asset Name"

      className="mt-8 border rounded p-4"

      onChange={e => updateFormInput({ ...formInput, name: e.target.value })}

    />

    <textarea

      placeholder="Asset Description"

      className="mt-2 border rounded p-4"

      onChange={e => updateFormInput({ ...formInput, description: e.target.value })}

    />

    <input

      placeholder="Asset Price in Eth"

      className="mt-2 border rounded p-4"

      onChange={e => updateFormInput({ ...formInput, price: e.target.value })}

    />

    <input

      type="file"

      name="Asset"

      className="my-4"

      onChange={onChange}

    />

    {

      fileUrl && (

        <img className="rounded mt-4" width="350" src={fileUrl} />

      )

    }

    <button onClick={createItem} className="font-bold mt-4 bg-pink-500 text-white rounded p-4 shadow-lg">

      Create Digital Asset

    </button>

  </div>

</div>

)

}

5

Hi @Roushan_Kumar,

note that infura’s public gateway, ipfs.infura.io, has been discontinued and that url now redirects to Protocol labs’ public gateway, ipfs.io.

I think this is the source of the CORS error -
Reason: CORS request external redirect not allowed - HTTP | MDN
the redirect is causing the CORS error in some browsers.

If possible you should not use ipfs.infura.io for the gateway, and instead use an Infura dedicated gateway or use ipfs.io directly.

Let us know how you go.

Warm regards,
Chris | Infura | ConsenSys

1 Like
6

Hi Chris, this is where I am a bit confuse. From i am seeing is “ipfs.infura.io” is still being used save as observed in the dashboard ? Is it not the case ? Perhaps you can provide a clear example how to do this and when do we use ipfs.infura.io and when do we used the dedicated one.

image
image1094×561 41.4 KB

7

Hi @datuk2,

the key thing to understand here is the difference between accessing IPFS using the API, which provides a way to upload, pin, download, list, and interact with the IPFS network (and files stored there) in may ways, and an IPFS Gateway, which provides a simple way to retrieve only the files stored in the IPFS network.

For Infura, the API access is via https://ipfs.infura.io on port 5001.

Whereas a gateway allows retrieval of files on the standard port 443. Infura used to provide a free public gateway with limited transfer rates but retired that in favour of a higher performance dedicated gateway tied to your account where downloads are counted toward your data transfer usage (free up to 5GB/month, then $0.12 per GB per month thereafter, see Pricing | Infura).

There are other public gateways out there, such as the one from Protocol Labs: ipfs.io

So, the IPFS API endpoint is a different URL to the gateway endpoint.

Warm regards,
Chris | Infura | ConsenSys

There are still

1 Like
8

From what you have written above, then I should be using a dedicated gateway (XXX.infura-ipfs.io) and not the access point (ipfs.infura.io on port 5001).

In that case, my code is wrong as I am providing auth credentials to the access point when I should be providing auth to the dedicated gateway. That is the confusing part as why infura does not make it clear at the outset that the access point is for retrieving only and the credential auth is to access the dedicated gateway whereby one can get and add/pin. Also there is no information on how to present “TOKEN” to access the dedicated IPFS gateway We have both ProjectID + ProjectSecret and the example that I saw does not explain whether we use base64 or just plain and why the “:” is needed to separate the two. These would be useful to instead of having me trial many combinations. Tq

1 Like