I often saw a CORS Policy Error with Infura IPFS

Hello I asked this issue on ‘question’ board. but it didn’t go any further then I re-write on this board

I wrote some code to add/get a file via Infura ipfs.
Sometimes, it worked, but sometimes I met CORS policy Error.

Access to fetch at 'https://ipfs.infura.io:5001/api/v0/add?recursive=true&wrapWithDirectory=true&wrap-with-directory=true&stream-channels=true' from origin 'http://localhost:3000' has been blocked by CORS policy: 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.
POST https://ipfs.infura.io:5001/api/v0/add?recursive=true&wrapWithDirectory=true&wrap-with-directory=true&stream-channels=true net::ERR_FAILED

I used ipfs-http-client module in browser. and this is related code.

<body>
<input type="file" id="file" onchange="loadFile(event)" />
</body>

<script src="https://unpkg.com/ipfs-http-client/dist/index.min.js"></script>

<script>
  ipfs = window.IpfsHttpClient({
            host: 'ipfs.infura.io',
            port: 5001,
            protocol: 'https',
          });

  var loadFile = function(event) {

    const reader = new FileReader();
    reader.onload = function() {
      buf = Ipfs.Buffer(reader.result); // Convert data into buffer
    };
    reader.readAsArrayBuffer(file.files[0]); // Read Provided File
  };

 const results = await ipfs.add([{
       path: "mypath",
       content: buf,
     }], {
       recursive: true,
       wrapWithDirectory: true
     })
</script>

If you don’t mind, you can also test this in here

if you need more anything, I’m willing to help you.
I want your team to respond more actively please.

1 Like