React and nginx: refused to connect to localhost

I have my React (frontend) and Django REST (backend) running on a remote Ubuntu server with nginx. I also have a simple reverse proxy defined in conf.d/bookmarks.conf to manage all of that:

server {
    listen 80;
    listen [::]:80;

    location /api/ {    # Backend
        proxy_pass http://127.0.0.1:1337/api/;

    }

    location / {    # Frontend
        root        /var/www/bookmarks/html/;
        index       index.html;
        try_files   $uri $uri/ /index.html;
    } 
}

I run my Django app with runserver python manage.py runserver 127.0.0.1:1337, and React static files are stored in the folder described above

I try to connect to API with React:

const generateOpendIdLink = async () => {
      const generateOpendIdLinkEndpoint = 'http://127.0.0.1/api/opendid-link-generator/';
      const requestOptions = {
        method: 'GET',
        headers: {'Content-Type': 'application/json'},
      };

      try {
        const response = await fetch(generateOpendIdLinkEndpoint, requestOptions);
        if (response.status == 200) {
          ...
        };
      } catch (error) {
        console.log(error);
      };
    };

And get an error

GET http://127.0.0.1/api/opendid-link-generator/ net::ERR_CONNECTION_REFUSED

This is quite odd, because I could connect to API from the web no problem: running the same GET on the server IP address http://XX.XXX.XX.XX/api/opendid-link-generator/ from Postman works as expected. This is also true when I change 127.0.0.1 for the server IP in the React code, it all starts to work.

I also set ALLOWED_HOSTS = ['*'] for test purposes while trying to solve this problem, and it did not help. Does anyone know what could be the source of the problem?

I don't know anything about javascript, but let me give it a shot:

const generateOpendIdLinkEndpoint = 'http://127.0.0.1/api/opendid-link-generator/';

This definition does not include the port! Most likely it looks up the default http port at :80 then. Try to include the port and let me know!

The JS code is executed on the client device and will therefore not share localhost with the Django app. That's why you need to specify the IP-address to the server.

Back to Top