1

I am trying to make a dapp to upload files on IPFS Infura. I am using IpfsHttpClient in web browser by including the script

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

But when I get the instance using:

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

I get the error and 400(Bad Request)

Access to fetch at 'http://ipfs.infura.io:5001/api/v0/add?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.

And when I am using :

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

I get the error:

Uncaught ReferenceError: https is not defined

What should I do?

I'm facing a very similar issue with Infura IPFS CORS. Here is a minimal code sample:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Infura IPFS CORS issue</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/index.js"></script>
    <script src="https://bundle.run/[email protected]"></script> <!-- required to convert ArrayBuffer to Buffer -->

  </head>
  <body>

    <h3>readAsArrayBuffer to Buffer to Infura to IPFS</h3>
    <input type="file" id="upload">

    <script>
        const ipfs = window.IpfsHttpClient('ipfs.infura.io', '5001')

        $("#upload").on("change", function() {
            var reader = new FileReader();
            reader.onload = function (e) {

                const magic_array_buffer_converted_to_buffer = buffer.Buffer(reader.result); // honestly as a web developer I do not fully appreciate the difference between buffer and arrayBuffer 
                ipfs.add(magic_array_buffer_converted_to_buffer, (err, ipfsHash) => {
                    console.log(err,ipfsHash);
                })
            }
            reader.readAsArrayBuffer(this.files[0]);
        })
    </script>

  </body>
</html>
Improve this question

2 Answers 2

Reset to default
0

It seems like the your NO 'Access-Control-Allow-Origin' is addressed in this Question here. See if this solves your Bad Request error by using Cors proxy.

IPFS uses http protocol to get files in your local so your {protocol: 'https'} will throw an error.

Hope this helps!

Improve this answer
0

It is sorted now: https://ethereum.stackexchange.com/a/70120/2524

The difference from the snippet in the original question: { protocol: 'https' }

Uncaught ReferenceError: https is not defined

Looks like missing 'https' quotes 😇

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Infura IPFS CORS issue</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <script src="https://unpkg.com/[email protected]/dist/index.js"></script>
    <script src="https://bundle.run/[email protected]"></script>
  </head>
  <body>

    <h3>readAsArrayBuffer to Buffer to Infura to IPFS</h3>

    <input type="file" id="upload">

    <div id="link"></div> <!-- markup created after upload -->

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

        $("#upload").on("change", function() {
            var reader = new FileReader();
            reader.onload = function (e) {

                const magic_array_buffer_converted_to_buffer = buffer.Buffer(reader.result); // honestly as a web developer I do not fully appreciate the difference between buffer and arrayBuffer 
                ipfs.add(magic_array_buffer_converted_to_buffer, (err, result) => {
                    console.log(err, result);

              let ipfsLink = "<a href='https://gateway.ipfs.io/ipfs/" + result[0].hash + "'>gateway.ipfs.io/ipfs/" + result[0].hash + "</a>";
              document.getElementById("link").innerHTML = ipfsLink;

                })
            }
            reader.readAsArrayBuffer(this.files[0]);
        })
    </script>

  </body>
</html>
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.