I'm trying to run a website on an AWS EC2 instance using React, Express and Axios.

The problem: I'm unable to make axios calls to the Express back-end running on the same instance. The code works fine on my local machine, but on the EC2 instance I get Error: Network Error. The server runs on port 5000 and the client runs on port 3000. I'm able to access the website from the outside using the URL, and am able to make GET requests to the back-end directly using Postman.

Home.js (frontend)

import { useState, useEffect } from 'react';
import axios from 'axios';

function Home() {
    const [text, setText] = useState('');

    useEffect(() => {
        axios.get(`http://172.31.20.10:5000/`)
            .then(
                result => {
                    setText(result.data);
                },
                err => {
                    alert(err);
                    setText('An error has occurred');
                }
            );
    });

    return (
        <h1>{ text }</h1>
    );
}

export default Home;

App.js (frontend)

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Home from './Home';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <Home />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

App.js (backend)

const express = require('express');
const cors = require('cors');
const app = express()
const port = 5000;

app.use(express.json());
app.use(cors());

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

app.listen(port, () => {
    console.log(`App listening on http://localhost:${port}`);
});

172.31.20.10 is the private IP of the EC2 instance. I've tried using localhost instead of the IP, https:// instead of http://, not use http(s) at all, leaving the http and IP/localhost out entirely, etc etc. None have worked so far. Any help would be much appreciated.