CODEWITHSUNDEEP
htmlreactjsnpmipfs
Andy Christie
Andy Christie

Reputation: 71

Ipfs node won't connect to my react app running on local host

I am trying to create a react component that lets you submit a .jpeg and upload it ipfs. The daemon starts and I can view the ipfs node in the ipfs-go-companion add on with config

gateway - http://localhost:8080 API - http://127.0.0.1:5001

It has a toggle button that enables/disables ipfs integrations for localhost but it is disabled and every time I press it; it disables itself again.

In my app when I select a file and click the submit button I get the following error.

fetch.browser.js:101 POST http://127.0.0.1:5001/api/v0/add?stream-channels=true&progress=false 403 (Forbidden)
fetchWith @ fetch.browser.js:101
fetch @ http.js:130
Client.fetch @ core.js:192
post @ http.js:174
addAll @ add-all.js:36
index.js:1 HTTPError: 403 - Forbidden

    at Object.errorHandler [as handleError] (http://localhost:3000/static/js/1.chunk.js:57836:15)
    at async Client.fetch (http://localhost:3000/static/js/1.chunk.js:61144:9)
    at async addAll (http://localhost:3000/static/js/1.chunk.js:54724:17)
    at async last (http://localhost:3000/static/js/1.chunk.js:67287:20)
    at async Object.add (http://localhost:3000/static/js/1.chunk.js:54865:14)
    at async handleSubmit (http://localhost:3000/static/js/main.chunk.js:1375:20)

I have started the ipfs daemon with

sudo ipfs daemon

My file upload component is

import React, { Component, useEffect, useState } from "react";
import { Form, Col, Button, InputGroup } from 'react-bootstrap';
const ipfsClient = require('ipfs-http-client')
const Buffer = require('buffer').Buffer;

// connect to the default API address http://localhost:5001

const UploadImage = () => {

  const [request, setRequest] = useState({});
  const [file, setFile] = useState({});
  const [img, setImg] = useState('');

  const handleSubmit =  async (event) => {
    event.preventDefault();
  //  const { cid } = await ipfs.add(img)
    //const ipfs = ipfsClient('http://localhost:5001') // (the default in Node.js)
    const ipfs = ipfsClient('/ip4/127.0.0.1/tcp/5001')

    try {
      const file =  await ipfs.add(img)
    //  setFile(file)
       console.log(file)
     } catch (e) {
      console.error(e)
    }
  }

  const convertToBuffer = async(reader) => {
  //file is converted to a buffer for upload to IPFS
    const buffer = await Buffer.from(reader.result);
    setImg(buffer);
  };

  const captureFile = async(event) => {
    event.stopPropagation()
    event.preventDefault()
    const file = event.target.files[0];
    let reader = new window.FileReader();
    reader.onload = function(event) {
      //const re = convertToBuffer(res);
      const res = reader.readAsArrayBuffer(re);
            const re = convertToBuffer(res);

        console.log(img);
        //setImg(res)

    };
   // reader.readAsArrayBuffer(blob);
   // console.log(res);
       };

  const myChangeHandler = async(event) => {
    let nam = event.target.name;
    let val = event.target.value;
    switch (nam) {
      case 'img':
        console.log(img)
        setImg(val)
        break;
    }
  }

  return (
    <div>
      <form onSubmit={handleSubmit}>
        <div>
          <label for="profile_pic">Choose file to upload</label>
           <div style={{ padding: '10px' }}><p>Enter your name:</p>
            <input
              type="file"
              name='img'
              onChange={captureFile}
              accept=".jpg, .jpeg, .png"
              required
            /></div>

        </div>
        <div>
        <input type='submit' value="Submit" />
        </div>
      </form>
    </div>
  )
}

export default UploadImage;

I can add files from the terminal and in the IPFS GUI running on http://127.0.0.1:5001/ when I run the daemon but I keep getting a 403 error every time I click the submit button. I kept getting a Access-Control-Allow-Origin error before that but I installed this add on for chrome and now I don't get that error

https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf

Upvotes: 2

Views: 2886

Answers (1)

SimpleMan
SimpleMan

Reputation: 23

It seems the issue is that CORS is left to the default settings on your IPFS node: block all connections.
To fix this, you must configure your CORS headers.

The official IPFS tutorial to do this is here: https://github.com/ipfs/ipfs-webui#configure-ipfs-api-cors-headers

If you want to do this by editing the config file directly or through the WebUI:

An example all-allowing (potentially unsafe, make sure you're behind a firewall) Node configuration for the API section is:

"API": {
        "HTTPHeaders": {
            "Access-Control-Allow-Methods": [
                "PUT",
                "POST"
            ],
            "Access-Control-Allow-Origin": [
                "*"
            ]
        }
    },

Setting the allow-origin to * will simply allow all origins, but you can also use a list of origin domains to be safer.

If you visit https://webui.ipfs.io or https://dev.webui.ipfs.io they will give you similar instructions on how to change your node's CORS settings so that they may operate.

Upvotes: 0

Related Questions