Nginx Proxy Pass Nodejs to React Application

Question

I have a front end of react and backend of node, for some reason it wont make the right request to the backend.

The error log given by nginx

111: Connection refused) while connecting to upstream, server: _, request: "GET /api/info HTTP/1.1", upstream: "http://127.0.0.1:5000/info"

I noticed that it makes the wrong request because the http://127.0.0.1:5000/info should be http://127.0.0.1:5000/api/info

My default config

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

        root /var/www/{{AppName}}/frontend/build;

        server_name {{myDomainName}};

        location / {
                try_files $uri $uri/ =404;
        }

        location /api/ {
                proxy_pass http://localhost:5000/;
        }

When I visit my website it just errors me out with Error 404

Đăng Khoa Đinh · Accepted Answer · 2021-06-26 10:49:29Z

6

I noticed that it makes the wrong request because the http://127.0.0.1:5000/info should be http://127.0.0.1:5000/api/info

Action

Remove the '/' at the end of the proxy address

location /api/ {
    proxy_pass http://localhost:5000; # remove the '/' at the end
}

Explain

From nginx documentation

To pass a request to an HTTP proxied server, the proxy_pass directive is specified inside a location. For example:
location /some/path/ {
    proxy_pass http://www.example.com/link/; 
}
Note that in the first example above, the address of the proxied server is followed by a URI, /link/. If the URI is specified along with the address, it replaces the part of the request URI that matches the location parameter. For example, here the request with the /some/path/page.html URI will be proxied to http://www.example.com/link/page.html

In your case, the URI is /, it replaces /api/ in the request URI. So: http://yourserver/api/info will be proxied to http://127.0.0.1:5000/info

edited Jun 26, 2021 at 10:49

answered Jun 26, 2021 at 10:44

Đăng Khoa Đinh

5,4413 gold badges18 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

kgcusi Over a year ago

I have solved this but you came first in posting the answer lol! Thank you!

Collectives™ on Stack Overflow

Nginx Proxy Pass Nodejs to React Application

1 Answer 1

Action

Explain

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Action

Explain

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related