title: Ipfs node won't connect to my react app running on local host
body: <p>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</p>
  <p>gateway - http://localhost:8080
  API - <a href="http://127.0.0.1:5001" rel="nofollow noreferrer">http://127.0.0.1:5001</a></p>
  <p>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.</p>
  <p>In my app when I select a file and click the submit button I get the following error.</p>
  <pre><code>fetch.browser.js:101 POST http://127.0.0.1:5001/api/v0/add?stream-channels=true&amp;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)
  </code></pre>
  <p>I have started the ipfs daemon with</p>
  <pre><code>sudo ipfs daemon
  </code></pre>
  <p>My  file upload component is</p>
  <pre><code>import React, { Component, useEffect, useState } from &quot;react&quot;;
  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 = () =&gt; {
  
    const [request, setRequest] = useState({});
    const [file, setFile] = useState({});
    const [img, setImg] = useState('');
  
    const handleSubmit =  async (event) =&gt; {
      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) =&gt; {
    //file is converted to a buffer for upload to IPFS
      const buffer = await Buffer.from(reader.result);
      setImg(buffer);
    };
  
    const captureFile = async(event) =&gt; {
      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) =&gt; {
      let nam = event.target.name;
      let val = event.target.value;
      switch (nam) {
        case 'img':
          console.log(img)
          setImg(val)
          break;
      }
    }
  
    return (
      &lt;div&gt;
        &lt;form onSubmit={handleSubmit}&gt;
          &lt;div&gt;
            &lt;label for=&quot;profile_pic&quot;&gt;Choose file to upload&lt;/label&gt;
             &lt;div style={{ padding: '10px' }}&gt;&lt;p&gt;Enter your name:&lt;/p&gt;
              &lt;input
                type=&quot;file&quot;
                name='img'
                onChange={captureFile}
                accept=&quot;.jpg, .jpeg, .png&quot;
                required
              /&gt;&lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div&gt;
          &lt;input type='submit' value=&quot;Submit&quot; /&gt;
          &lt;/div&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    )
  }
  
  export default UploadImage;
  </code></pre>
  <p>I can add files from the terminal and in the IPFS GUI running on <a href="http://127.0.0.1:5001/" rel="nofollow noreferrer">http://127.0.0.1:5001/</a> 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</p>
  <p><a href="https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf" rel="nofollow noreferrer">https://chrome.google.com/webstore/detail/allow-cors-access-control/lhobafahddgcelffkeicbaginigeejlf</a></p>