Facing cross-origin issue when adding a file on react evn. using ipfs-http-client package

while trying to add jpeg file in ipfs infura with globSource, i am getting the proper response with path and CID. But when i am trying this with a react environment, the same infura api, using urlSource function is getting blocked by cors policy and the file isn’t getting uploaded in infura ipfs.
code ----

const {ipfsClient, globSource, create} = require('ipfs-http-client')

async function a(){
	const auth =
	  'Basic ' + Buffer.from(projectId + ':' + projectSecret).toString('base64')

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

await client.add(globSource('jump.jpg')).then((res) => {
  console.log(res)
})

}

error –

several people facing the same issue with no assistance for over 3 weeks now: IPFS CORS error

Hey @debokarmakar1994, and welcome to the Infura community! Try the below and let me know if that works (you can adjust it to include your async/await function):

const { create } = require('ipfs-http-client')
const projectId = <project_id>
const projectSecret = <project_secret>
const auth =
  'Basic ' + Buffer.from(projectId + ':' + projectSecret).toString('base64')
const client = create({
  host: 'ipfs.infura.io',
  port: 5001,
  protocol: 'https',
  headers: {
    authorization: auth
  }
})

It appears there was an update to ipfs-http-client that may be causing an error with our example code.

hi @Leiya_Kenney
this is the kind of error i am getting, it seems to be a package related issue(refer the snapshot). Please help me with this.

`const { create, urlSource } = require("ipfs-http-client");`

  const upload = async () => {
    console.log("upload");
    const projectId = "xxxxxx";
    const projectSecret = "xxxxxx";
    const auth =
      "Basic " +
      Buffer.from(projectId + ":" + projectSecret).toString("base64");
    const client = create({
      host: "ipfs.infura.io",
      port: 5001,
      protocol: "https",
      headers: {
        authorization: auth
      }
    });

await client
  .add(
    urlSource(
      "https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/6d0eb73a-589e-4e22-bc86-c45e3e962be9/d1zsze5-026f413e-e502-47ec-8131-9b0eb3172f22.jpg?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzZkMGViNzNhLTU4OWUtNGUyMi1iYzg2LWM0NWUzZTk2MmJlOVwvZDF6c3plNS0wMjZmNDEzZS1lNTAyLTQ3ZWMtODEzMS05YjBlYjMxNzJmMjIuanBnIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.83LSoZZk3b8-czww6H7KPmvE6f4TL6RP77Q1mHBAKa4"
    )
  )
  .then((res) => {
    console.log(res);
  });
 };

Hi @debokarmakar1994, looks like you’re running into an issue with finding the modules - check this thread out and see if making some of those changes helps.