部署在 Digital Ocean 上的 React App 出现 404 错误

Question

I have a validation form on React but on clicking submit m getting "404 Error". It works perfect on local machine. //from app.js

handleSubmit = async e => {
    e.preventDefault();
    const response = await fetch('/api/emailVerifier', {
      method: 'POST',
      body: this.state,
      headers: {
        'Content-Type': 'application/json',
      },

      //body: JSON.stringify({ post: this.state.post }),

    });
    const body = await response.text();
    
    this.setState({ responseToPost: body });
  };

//from server.js

app.post('/api/emailVerifier', async (req, res) => {
  console.log(req.body);
  const emailValidator = new EmailValidator();
  const { wellFormed, validDomain, validMailbox } = await emailValidator.verify(req.body.post);
  res.send(

    `response received , welllformed = ${wellFormed}, validDomain = ${validDomain}, validMailbox = ${validMailbox}`,
  );
});

i have installed my my validator on server using npm i add deep-email-validator --save

My Directory on server has

asset-manifest.json  index.html   manifest.json      package.json  static
build                logo192.png  node_modules       robots.txt
favicon.ico          logo512.png  package-lock.json  server.js

Answer 1

Can you access other endpoints in server.js on DigitalOcean? EG: if you create:

app.get('/', function (req, res) {
  res.send('hello world')
})

And make a request to it from your React app does it reach that endpoint?

---

I think you will struggle to run the React app and server from the same location.

If your React app is setup correctly it will try to handle all requests coming to that url.

You could run the express server on a different port to the React app. Then traffic won't get routed to both the React server and your Express server.