IPFS CORS error

Hey @ti0, and welcome to the Infura community! Check out this blog post - it should help you debug that CORS error :slight_smile:

Hey Leiya!

The documentation clearly recommends to use js-ipfs/ipfs-http-client but the code provided there doesn’t work:

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

The “authorization” header makes browser to send preflight request with headers:

  1. Access-Control-Request-Headers: authorization
  2. Access-Control-Request-Method: POST

But response from the ipfs.infura doesn’t contain:

  1. Access-Control-Allow-Headers: Authorization
  2. Access-Control-Allow-Origin: origin

It means, I think, that Infura IPFS API server is not set up properly. Is it correct? If yes, please set up Infura IPFS API server, if not, could you provide a workaround?

Thank you!

1 Like

I’m with @festbot here. This is not a client error, this is a server error that needs to be fixed by Infura team. The API cannot be accessed through a browser, though it works fine through console / backend.

Any work around? I’m stuck now.

It appears the problem is the addition of the authorization header. This makes the request complex and then it hits CORS restrictions. When tested on my local node, without the auth header, everything works. With the auth header, no matter what configuration I try with the node, including

   		"Access-Control-Allow-Credentials": [
   			"true"
   		],
   		"Access-Control-Allow-Methods": [
   			"PUT",
   			"GET",
   			"POST"
   		],
   		"Access-Control-Allow-Origin": [
   			"*"
   		]

I get the CORS error. I suspect it’s a problem with IPFS itself and it just started happening when the auth header was required.

Hi,
We’re experiencing the same issue. We’re trying out the IPFS beta API with authorization headers and getting CORS errors.
Posts to https://ipfs.infura.io:5001/api/v0/add without any authentication work fine, it’s only after trying with authentication that the issues arise.
Thanks for your time.

@Infura team, is this the level of support to be expected? Doesn’t inspire a lot of trust in using the service if such a basic issue as CORS cannot be handled properly on the server-side.

Hey @festbot, @Crypto.Joe, @Theodore_Michels, and @ti0 - try the below code and let me know if that still runs into the CORS error. I was able to make it work with this code with no CORS errors:

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.

If that doesn’t appear to be the issue, can you send a picture of the browser dev-tools output so we can see how your security settings are responding?

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

  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);
      });
  };

No love. I still can’t pass the auth in the header. Without it, I’m fine.

2 Likes

Can you send a picture of the browser dev-tools output so we can see how your security settings are responding?

Here you go:

Access to fetch at 'https://ipfs.infura.io:5001/api/v0/add?stream-channels=true&progress=false' from origin 'http://127.0.0.1:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Thanks @Crypto.Joe! We’re looking into it now.

I get the exact same behaviour with the IPFS server when installed locally. It’s triggered when you have a ‘complex header’ but not when you are not adding the auth field. I suspect it’s just never adding the Access-Control-Allow-Oriigin to the header and that only has an impact with complex headers.

I am facing the same issue, If i do an upload including my infura auth header it fails everytime.

when i strip out the auth header it works… but i really wanna use the header in order to pin my files to my infura project.

any help would be really appreciated

@garygeorge - are you getting the same error message as above?

@Leiya_Kenney yes , unfortunately i am, i have not found any solution and have been looking for over a week.

If i do a call and include the infura header it returns this:

Access to fetch at ‘https://ipfs.infura.io:5001/api/v0/add?stream-channels=true&progress=false’ from origin ‘http://localhost:8888’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

1 Like

I have the same problem with CORS. It is clearly the problem on the Infura side! Is there any info when you plan to fix this?

2 Likes

We are experiencing the same error on our side when using the authorization header. Along with this dummy trash talk with community support staff, could we get some developers to look into this issue? It’s a core requirement for using your IPFS service from browsers. Not everyone uses this from the backend side. How can this encourage anyone to use your IPFS service if nobody is even trying to fix this configuration issue?

2 Likes

Hi, I pasted this from my browser, it is my exact error i see in the console when calling using my frontend application.