Question 97217 in Nginx Question posted in
The official documentation can be found here.

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?

Tags:

2

Answers


  1. 0

    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!

    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search