Failed to load resource: the server responded with a status of 400 (Bad Request) upload-infura.html:1 Access to fetch at 'http://ipfs.infura.io:5001/api/v0/add?stream-channels=true' from origin 'null' 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.

Here is my super simple demo

<!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/ipfs-http-client@30.1.3/dist/index.js"></script>
    <script src="https://bundle.run/buffer@5.2.1"></script>

  </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>

EDIT:

Adding { protocol: "https" } seems to be solving the issue.

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

INFURA / infura

IPFS - yet another CORS issue #181

Here is my super simple demo

Related links:

EDIT: