Nginx 代理将 Nodejs 传递给 React 应用程序

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

Answer 1

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