Express is working with curl but not on react website-CodePudding

I am attempting to do a simple website that utilizes react frontend and express backend. Right now the react website is being hosted successfully on a domain I purchased. On the same machine, there is an express server running. I can successfully call it with curl http://localhost:3000/api. I've added code to the react front end to console.log the results of the api endpoint. The console is showing me 404 errors from the website. Please help me understand where I have misconfigured.

I have added the line "proxy": "http://localhost:3000", to package.json file.

front end

import React, { useEffect} from 'react';
import './App.css';

function App() {
  fetch('api')
  .then(res => {
      console.log(res);
   })

  return (
    <div className="App">
      <header className="App-header">
        <p>
          Site Under Construction
        </p>
      </header>
    </div>
  );
  
}

export default App;

back end

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})


// create a GET route
app.get('/api', (req, res) => { //Line 9
  res.send({ express: 'YOUR EXPRESS BACKEND IS CONNECTED TO REACT' }); //Line 10
}); //Line 11

CodePudding user response：

I added the following reverse proxy to my nginx file and it seems to have fixed the issue.

         location /api/ {    # Backend
              proxy_pass  http://localhost:3001;
         }