CORS policy Error with Infura IPFS

Hello I tried to upload to infura IPFS with js code.
I successfully uploaded small sized file <= 50MB but when I tried 50MB~100MB sized file to upload, I got this error message. it’s same case when I downloaded with ‘get’ api

This is sample code I used

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

      <h1 id="title">IPFS Client TEST (Infura)</h1>

      <select id="ipfs_client">
        <option value="infura" selected="selected">infura</option>
        <option value="private_gateway">private gateway</option>
      </select>

      <div id="" style="margin-top:40px">
        <h2>file upload</h2>
        <input type="file" id="file" onchange="loadFile(event)" />
        <input type="button" value="upload" id="send_ipfs" onclick="javascript:sendIpfs();" />
        <a id="file_url"></a>

      </div>

      <div id="" style="margin-top:40px">
        <h2> file download </h2>
        <input type="text" id="downloadHash" placeholder="download hash" onchange="" />
        <input type="button" value="get" id="get_ipfs" onclick="javascript:getIpfs();" />
        <a id="linkToDownload" href="" download=""></a>

      </div>


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


    async function sendIpfs() {

        var start = new Date();
        console.log("start time: ", start)

        const results = await ipfs.add([{
          path: 'videotest',
          content: buf,
        }], {
          recursive: true
        })
        console.log(results);
        var end = new Date();
        console.log('interval: ', (end - start) / 1000, 'size:', buf.length / 1000, 'kb')

        const hash = results[0].hash;
        console.log(hash);

      }


      async function getIpfs() {

        const validCID = document.getElementById('downloadHash').value
        ipfsUrl = "https://ipfs.io/ipfs/" + validCID;

        // $('#get_ipfs').parent().append('<br> <a id="downloadLink" href="' + ipfsUrl + '" download>'+ ipfsUrl+' </a>');
        $('#get_ipfs').parent().append("<br> <span> it's been downloading, please wait... </span>");

        var start = new Date();
        console.log("start time: ", start)

        ipfs.get(validCID, function(err, files) {
          if (err) {
            console.log(err);
            $('#get_ipfs').parent().append("<span> fail! </span>");
          }

          downloadedfiles = files;
          files.forEach((file) => {
            console.log(file.path)
            console.log(file.content.toString('utf8'))

            var blob = new Blob(
              [file.content], {
                type: 'video/mp4'
              }
            );
            var blobUrl = URL.createObjectURL(blob);

            $('#get_ipfs').parent().append("<a>download</a>");

            $('#get_ipfs ~ a:last')[0].setAttribute('href', blobUrl);
            $('#get_ipfs ~ a:last')[0].innerHTML = 'download';
            $('#get_ipfs ~ a:last')[0].download = fileMetaInfo[0].name;
            
            var end = new Date();
            console.log('interval: ', (end - start) / 1000, 'size:', buf.length / 1000, 'kb')

          })
        })

      }
    </script>
    <body>

Could you provide more the full debug output from the network debugger, this is not an issue with WS, rather we suspect the http request is receiving a 500 error from AWS without the CORS headers.

It would also help if you could attempt the http request in a curl to dig down into that flow.

I’m not sure this is what you need exactly.

and it’s full debug error message.

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 'https://dev.nemodax.com' 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.
request.js:79 POST https://ipfs.infura.io:5001/api/v0/add?recursive=true&wrapWithDirectory=true&wrap-with-directory=true&stream-channels=true net::ERR_FAILED
u._onFinish @ request.js:79
(anonymous) @ request.js:24
a.emit @ events.js:139
C @ _stream_writable.js:620
I @ _stream_writable.js:466
m.run @ browser.js:169
d @ browser.js:133
setTimeout (async)
u @ browser.js:45
o.nextTick @ browser.js:158
(anonymous) @ _stream_readable.js:886
k.resume @ _stream_readable.js:876
k.on @ _stream_readable.js:794
k.pipe @ _stream_readable.js:658
(anonymous) @ send-files-stream.js:148
(anonymous) @ add.js:34
(anonymous) @ index.js:41
(anonymous) @ index.js:36
(anonymous) @ add.js:53
sendIpfs @ index.html:229
onclick @ index.html:29
index.html:1 Uncaught (in promise) TypeError: Failed to fetch
Promise.then (async)
sendIpfs @ index.html:238
onclick @ index.html:29

Thanks for the added information, we are investigating your issue and will let you know if we need any more information.

This is not everytime I did. sometimes it worked without problem. It’s more weird for me.

There is no error with curl. It was never occurred in curl environment

We did a quick edit of your code and were able to get it working, take a look and let us know if you have any questions.
https://jsfiddle.net/65kzj0sn/1/

Thank you for your response.
I see the part of edit, but I think that’s not related to CORS policy issues…

I’m sorry to make you to misunderstand.
The code that I shared is the part of my code. so that didn’t work itself and I think you probably that might be the problem.

This is the full code of me

<!DOCTYPE html>
<html>

<head>
  <title></title>

  <!-- loading the minified version -->
  <script src="https://unpkg.com/ipfs/dist/index.min.js"></script>
  <script src="https://unpkg.com/ipfs-http-client/dist/index.min.js"></script>
  <script src="https://unpkg.com/ipfs-api@9.0.0/dist/index.js" integrity="sha384-5bXRcW9kyxxnSMbOoHzraqa7Z0PQWIao+cgeg327zit1hz5LZCEbIMx/LWKPReuB" crossorigin="anonymous"></script>
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bignumber.js/9.0.0/bignumber.js" integrity="sha256-TYZ2kR74G+TqMIiLuKpB57VUTNKhGFknyOKgRYqxhnw=" crossorigin="anonymous"></script>


</head>

<body>

  <h1 id="title">IPFS Client TEST (Infura)</h1>

  <select id="ipfs_client">
    <option value="infura" selected="selected">infura</option>
    <option value="private_gateway">private gateway</option>
  </select>

  <div id="" style="margin-top:40px">
    <h2>file upload</h2>
    <input type="file" id="file" onchange="loadFile(event)" />
    <input type="button" value="upload" id="send_ipfs" onclick="javascript:sendIpfs();" />
    <a id="file_url"></a>

  </div>

  <div id="" style="margin-top:40px">
    <h2> file download </h2>
    <input type="text" id="downloadHash" placeholder="download hash" onchange="" />
    <input type="button" value="get" id="get_ipfs" onclick="javascript:getIpfs();" />
    <a id="linkToDownload" href="" download=""></a>

  </div>
  <div style="margin-top:80px">
    <h1>IPFS Node TEST (js-ipfs Node)</h1>
    <div id="" style="margin-top:40px">
      <h2>upload(browser Node) </h2>
      <input type="file" id="fileBrowserNode" onchange="loadFileForBrowserNode(event)" />
      <input type="button" value="upload" id="send_ipfs_to_browser_node" onclick="javascript:sendIpfsToBrowserNode()" />
      <a id="file_url"></a>

    </div>

    <div id="" style="margin-top:40px">
      <h2> download(browser Node) </h2>
      <input type="text" id="downloadHashBrowserNode" placeholder="download hash" onchange="" />
      <input type="button" value="get" id="get_ipfs_from_browser_node" onclick="javascript:getIpfsFromBrowserNode()" />
      <a id="linkToDownloadBrowserNode" href="" download=""></a>

    </div>

    <div id="" style="margin-top:40px">
      <h2> stat bandwidth </h2>
      TotalIn:<span id="bwTotalIn"></span><br>
      TotalOut:<span id="bwTotalOut"></span><br>
      RateIn:<span id="bwRateIn"></span><br>
      RateOut:<span id="bwRateOut"></span><br>
    </div>
  </div>
</body>


<script>
  var downloadedfiles
  var onloadfile
  var buf;


  async function getBandWidth() {
    bw = await node.stats.bw()

    $('#bwTotalIn').html(formatSizeUnits(bw.totalIn.toString().slice(0, 5)));
    $('#bwTotalOut').html(formatSizeUnits(bw.totalOut.toString().slice(0, 5)));
    $('#bwRateIn').html(formatSizeUnits(bw.rateIn.toString().slice(0, 5)) + '/s');
    $('#bwRateOut').html(formatSizeUnits(bw.rateOut.toString().slice(0, 5)) + '/s');
  }

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

  chooseClient = function() {
    var selectedClient = $('#ipfs_client').val();
    console.log(selectedClient);
    if (selectedClient == 'infura') {
      ipfs = window.IpfsHttpClient({
        host: 'ipfs.infura.io',
        port: 5001,
        protocol: 'https'
      });

      $('#title').html('IPFS Client TEST (Infura)');
    } else if (selectedClient == 'private_gateway') {
      ipfs = window.IpfsHttpClient({
        host: 'devipfs.nemodax.com',
        port: 5001,
        protocol: 'https'
      })
      $('#title').html('IPFS Client TEST (devipfs Private Gateway)');
    }
  }


  $('#ipfs_client').on('change', chooseClient);
  $('#ipfs_client').on('click', chooseClient);




  const node = new Ipfs({
    repo: 'ipfs-' + Math.random(),
    config: {
      Addresses: {
        Swarm: [
          '/dns4/ws-star.discovery.libp2p.io/tcp/443/wss/p2p-websocket-star'
        ]
      }
    }
  })



  node.on('ready', function() {
    console.log('node is ready')
    setInterval(getBandWidth, 3000);
  })


 const reader = new FileReader();

  var loadFile = function(event) {
    console.log('upload::');

    const reader = new FileReader();
    reader.onload = function() {
      console.log('onload::');
      onloadfile = reader
      buf = Ipfs.Buffer(reader.result); // Convert data into buffer

    };

    const file = document.getElementById("file");
    reader.readAsArrayBuffer(file.files[0]); // Read Provided File

  };

  var loadFileForBrowserNode = function(event) {
    console.log('upload::');

    const reader = new FileReader();
    reader.onload = function() {
      console.log('onload::');
      onloadfile = reader
      buf = Ipfs.Buffer(reader.result); // Convert data into buffer

    };

    const file = document.getElementById("fileBrowserNode");
    reader.readAsArrayBuffer(file.files[0]); // Read Provided File

  };




  async function sendIpfs() {

    var start = new Date();
    console.log("start time: ", start)
    // ipfs.add([
    //       {
    //         path: `my_ipfs_hash/image`,
    //         content: fs.createReadStream(`./config/data/ipfs_data/my_ipfs_hash/low_res.gif`),
    //       },
    //       {
    //         path: `my_ipfs_hash/description`,
    //         content: fs.createReadStream(`./config/data/ipfs_data/my_ipfs_hash/data`),
    //       }
    //     ], {recursive: false}

    //const results = await ipfs.add(buf);
    const results = await ipfs.add([{
      path: 'videotest',
      content: buf,
    }], {
      recursive: true
    })
    console.log(results);
    var end = new Date();
    console.log('interval: ', (end - start) / 1000, 'size:', buf.length / 1000, 'kb')

    const hash = results[0].hash;
    console.log(hash);

  }

  $('#send_ipfs').parent().append('<button id="pin" value="pin">pin</button>')
  $('#pin').on('click', function() {
    node.pin.ls(hash, function(err, pinset) {
      if (err) {
        throw err
      }
      console.log(pinset)
    })
    ipfs.pin.add(hash, function(err) {
      console.log("pin error");
    })
  })



  async function getIpfs() {

    const validCID = document.getElementById('downloadHash').value
    ipfsUrl = "https://ipfs.io/ipfs/" + validCID;

    // $('#get_ipfs').parent().append('<br> <a id="downloadLink" href="' + ipfsUrl + '" download>'+ ipfsUrl+' </a>');
    $('#get_ipfs').parent().append("<br> <span> it's been downloading, please wait... </span>");

    var start = new Date();
    console.log("start time: ", start)

    ipfs.get(validCID, function(err, files) {
      if (err) {
        console.log(err);
        $('#get_ipfs').parent().append("<span> fail! </span>");
      }

      downloadedfiles = files;
      files.forEach((file) => {
        console.log(file.path)
        console.log(file.content.toString('utf8'))

        var blob = new Blob(
          [file.content], {
            type: 'video/mp4'
          }
        );
        var blobUrl = URL.createObjectURL(blob);
        // var linkToDownload = document.getElementById('linkToDownload');
        //
        // linkToDownload.setAttribute('href', blobUrl);
        // linkToDownload.innerHTML = '다운받기';
        // linkToDownload.download = "test.mp4"

        $('#get_ipfs').parent().append("<a>다운받기</a>");

        $('#get_ipfs ~ a:last')[0].setAttribute('href', blobUrl);
        $('#get_ipfs ~ a:last')[0].innerHTML = '다운받기';
        $('#get_ipfs ~ a:last')[0].download = fileMetaInfo[0].name;
        
        var end = new Date();
        console.log('interval: ', (end - start) / 1000, 'size:', buf.length / 1000, 'kb')


      })
    })

  }



  async function sendIpfsToBrowserNode() {

    var start = new Date();
    console.log("start time: ", start)


    const results = await node.add([{
      path: $("#fileBrowserNode").val().split("\\")[2],
      content: buf,
    }], {
      recursive: true,
      wrapWithDirectory: true
    })
    console.log(results);
    var end = new Date();
    console.log('interval: ', (end - start) / 1000, 'size:', buf.length / 1000, 'kb')

    const hash = results[1].hash;
    console.log(hash);

  }


  async function getIpfsFromBrowserNode() {

    const validCID = document.getElementById('downloadHashBrowserNode').value
    ipfsUrl = "https://ipfs.io/ipfs/" + validCID;

    $('#get_ipfs_from_browser_node').parent().append("<br> <span> it's been downloading, please wait... </span>");

    var start = new Date();
    console.log("start time: ", start)

    fileMetaInfo = await node.ls(validCID);

    node.get(fileMetaInfo[0].hash, function(err, files) {
      if (err) {
        console.log(err);
        $('#get_ipfs_from_browser_node').parent().append("<span> fail! </span>");
      }
      downloadedfiles = files;
      files.forEach((file) => {
        console.log("file name: ", fileMetaInfo[0].name)
        console.log("file path: ", fileMetaInfo[0].path)
        //        console.log(file.content.toString('utf8'))

        var type;

        var extension = fileMetaInfo[0].name.split('.')[1];
        if (extension != null || extension != 'undefined' || extension != '') {
          if (extension == "mp4") {
            type = 'video/mp4'
          } else if (extension == "png" ||
            extension == "jpg" ||
            extension == "jpeg") {
            type = 'image/' + extension;
          } else if (extension == "txt") {
            type = 'text/' + extension;
          } else {
            type = 'file/' + extension;
         }

        }


        var blob = new Blob(
          [file.content], {
            type: type
          }
        );
        var blobUrl = URL.createObjectURL(blob);

        //var linkToDownload = document.getElementById('linkToDownloadBrowserNode');
        $('#get_ipfs_from_browser_node').parent().append("<a>다운받기</a>");

        $('#get_ipfs_from_browser_node ~ a:last')[0].setAttribute('href', blobUrl);
        $('#get_ipfs_from_browser_node ~ a:last')[0].innerHTML = '다운받기';
        //linkToDownload.download = "test.mp4"
        $('#get_ipfs_from_browser_node ~ a:last')[0].download = fileMetaInfo[0].name;
        var end = new Date();
        console.log('interval: ', (end - start) / 1000, 'size:', fileMetaInfo[0].size / 1000, 'kb')

      })
    })

  }

  function formatSizeUnits(bytes) {
    if (bytes >= 1073741824) {
      bytes = (bytes / 1073741824).toFixed(2) + " GB";
    } else if (bytes >= 1048576) {
      bytes = (bytes / 1048576).toFixed(2) + " MB";
    } else if (bytes >= 1024) {
      bytes = (bytes / 1024).toFixed(2) + " KB";
    } else if (bytes > 1) {
      bytes = bytes + " bytes";
    } else if (bytes == 1) {
      bytes = bytes + " byte";
    } else {
      bytes = "0 bytes";
    }
    return bytes;
  }
</script>


</html>
                                                                                                                                                 378,1         Bot

To return, CORS policy problem is not fixed yet. sometimes it was occurred yet.