Docker container does not communicate with others in same docker network(bridge)

I'm trying to set the environment for web server on amazon web server. I want to use django, react, nginx and they are running on each docker container.

Belows are the command for running docker container.

sudo docker run --name django-server   -it -d -p "8000:8000"   --volume=$(pwd)/trello-copy-django-src:/backend/trello-copy   django-server  sudo docker run --name nginx-server   -d -p "80:80"   --volumes-from react-server   nginx-server 

I did not specified a custom docker network bridge and I checked that they are on same default bridge by typing $ docker inspect bridge.

[{   "Name": "bridge",   ...,   "Containers": {     "...": { "Name": "django-server", ... },     "...": { "Name": "react-server", ... },     "...": { "Name": "nginx-server", ... },   } }] 

So, I expected the react code down below works. But it worked only at my laptop, which has exactly same docker structure of aws.

... const res = await fetch('http://127.0.0.1:8000/api/'); ... 

Failed to load resource: net::ERR_CONNECTION_REFUSED 127.0.0.1:8000/api/:1

What am I doing wrong?

These are codes in my settings.py file of django.

CORS_ORIGIN_ALLOW_ALL=True # only for dev CORS_ALLOW_CREDENTIALS=True # only for dev CORS_ORIGIN_WHITELIST = (     'http://localhost',     'http://localhost:3000', ) 

The CORS message was App.js:10 Fetch API cannot load django-server:8000/api/. URL scheme must be "http" or "https" for CORS request..

I think it's different issue, and then django and CORS are not really problem... am I right?

I found that the 'localhost' of ajax await fetch('http://127.0.0.1:8000/api/'); means client side(browser) indeed.

Do I have to use server's public IP in there?