I am new to AWS. When I make a fetch request in my React app, I get an error. However, if I connect to the server domain created with aws ec2 or send a GET request with postman, it works fine. As I'm guessing, there seems to be a problem with the security settings of aws ec2. Please someone help me.

Here are some examples

// index.js (express js server)
import express from 'express'

const app = express()

 app.get('/', async (req, res) => {
   res.json({ data: 'hello world' })
 })

 const Port = '80'
 app.listen(Port, () => {
   console.log(`server is running on ${Port}`)
 })
})()

Here is React app.

// App.js (create-react-app example)
// 'localhost:3000' on my computer

export default App() {
const getRankData = async () => {
const response = await fetch(
//                ^^^^^^^^^
// TypeError: Failed to fetch
  "http://ec2-xxx-xxx-xxx-xxx.xxxxx.amazonaws.com/"
);
const myJson = await response.json();
return myJson;
};
// ......

ec2 security settings

/* inbound rules
Security group rule ID: sgr-xxxxx, Type: SSH, Protocol: TCP, Port range: 22, Source:0.0.0.0/0

Security group rule ID: sgr-xxxxx, Type: HTTP, Protocol: TCP, Port range: 80, Source:0.0.0.0/0

outbound rules
Security group rule ID: sgr-xxxxx, Port range: All, Protocol: All, Destination: 0.0.0.0/0 */