IPFS CORS error

I just got in the IPFS Beta, thanks for that!

I am using the example as listed in the docs here: https://infura.io/docs/ipfs#section/Authentication/Using-ipfs-http-client-in-JS

I get an error in the pre-flight request. I tested in Chrome, Edge, FF.

Access to fetch at ‘https://ipfs.infura.io:5001/api/v0/add?stream-channels=true&progress=false’ from origin ‘http://localhost:4200’ 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

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.

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