title: ReactJS app with nodejs/express for backend - can't get api to backend working
body: <p>I am trying to implement a React application which needs access to a database.  From what I have seen, this can be done with a nodejs/express as a backend.  In addition, I am under the impression that by adding a proxy entry to my react package.json file that I can redirect the "/api" requests of the fetch calls to the backend server.  However, I don't think it is working.  In the browser console, is showing a 404 error on the localhost:3000 (which is the NPM react server).  My backend is running on port 5000.</p>
  
  <p>I can access the "<a href="http://localhost:5000/api" rel="nofollow noreferrer">http://localhost:5000/api</a>" of the backend server and it returns JSON as designed.</p>
  
  <p>Here is my react package.json file:</p>
  
  <pre><code>{
    "name": "ubwo",
    "version": "0.1.0",
    "private": true,
    "proxy":"http://localhost:5000/api",
    "dependencies": {
      "react": "^16.8.6",
      "react-dom": "^16.8.6",
      "react-redux": "^7.1.0",
      "react-router": "^5.0.1",
      "react-router-dom": "^5.0.1",
      "react-scripts": "3.0.1",
      "redux": "^4.0.1",
      "redux-thunk": "^2.3.0"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "browserslist": {
      "production": [
        "&gt;0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ]
    },
    "resolutions": {
      "browserslist": "4.6.2",
      "caniuse-lite": "1.0.30000974"
    }
  }
  </code></pre>
  
  <p>This is my "test" React code.  I am not too familiar with fetch, so perhaps the code needs some changes?:</p>
  
  <pre><code>componentDidMount() {
      this.callApi()
          .then(res =&gt; this.setState({ response: res.express}))
          .catch(err =&gt; console.log(err));
  }
  
  callApi = async() =&gt; {
      const response = await fetch('/api/cust/all',{
          headers:{
              "accepts":"application/json"
          }
      });
      const customers = await response.json();
      if (response.status !== 200) throw Error(customers.message);
  
      return customers;
  }
  </code></pre>