2

I have an AWS Ubuntu server that hosts a react front end running at 127.0.0.1:4100 and makes api calls to a Go app using port 127.0.0.1:1323. I installed Nginx and setup proxy pass for these two ports in /etc/nginx/sites-available/default config file but I only get the front end getting called by Nginx. Using chrome inspect to check why the Go app is not serving some of the functionalities from the react app, I see this error

client.js:772 GET http://127.0.0.1:1323/api/ net::ERR_CONNECTION_REFUSED ERROR Error: Request has been terminated Possible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.

What am I doing wrong? Below is my default config file

server { 

listen 80 default_server; 
listen [::]:80 default_server; 

server_name _; 

location / { 

proxy_pass http://127.0.0.1:4100; 

} 

location /api { 

proxy_pass http://127.0.0.1:1323/; 

 } 
}
5
  • Is your react app pointing to 127.0.0.1:1323/api? Commented Apr 3, 2019 at 21:25
  • @ShawnC. correct I have the react app pointing to that. Commented Apr 3, 2019 at 22:46
  • 2
    The react app is running in the browser on your machine attempting to connect to a remote server using the IP of 127.0.0.1 which is an alias for your local machine. You need to change your React App to point to your AWS IP. http://AWS_IP/ Commented Apr 3, 2019 at 22:51
  • 1
    @ShawnC. You rock...thanks so much. Commented Apr 3, 2019 at 23:38
  • @ShawnC. I had the same error and solved it by your advice. Thank you! but Here's a question. so Let's say the server name is mydomain.com. when a user visit the site through the domain, nginx shows the user 127.0.0.1:4100 which is in the EC2 instance. From this case, I assumed that a user(client side) sends a request through mydomain.com/api and nginx sends a request to 127.0.0.1:1323 which is also in the EC2 instance but Apparently User needs to send a request to AWS_IP? why can't nginx sends a request to 127.0.0.1:1323 ?? Commented May 31, 2020 at 8:04

1 Answer 1

8

Your server is listening to port 80:

listen 80 default_server; 
listen [::]:80 default_server; 

So, you should make your request to that port:

GET http://127.0.0.1/api/     => http://127.0.0.1:1323/
GET http://127.0.0.1:80/api/  => http://127.0.0.1:1323/
GET http://127.0.0.1/         => http://127.0.0.1:4100/
GET http://127.0.0.1:80/      => http://127.0.0.1:4100/

Then nginx should correctly proxy your requests.

Update

To be more clear about nginx config.

server { 

listen 80 default_server;  // The port nginx is listening to ipv4
listen [::]:80 default_server; // The port nginx is listening to ipv6

server_name _; 

location / { // When you call this location...

proxy_pass http://127.0.0.1:4100; // You'll be redirected to this location

} 

location /api { // When you call this location...

proxy_pass http://127.0.0.1:1323/; // You'll be redirected to this location

 } 
}

Your configuration is okay according to nginx docs.

You said your client is trying to reach http://127.0.0.1:1323/api/ but It should be requesting http://127.0.0.1/api/ (whitout the port) to be redirected to http://127.0.0.1:1323/.

Here's another example:

server { 

    listen 80; 

    server_name localhost anywebsite.com; 

    location ~* ^/MyApp {
        proxy_pass http://localhost:5130;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection keep-alive;
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_send_timeout 2m;
        proxy_read_timeout 2m;
    }
}

In this case, everytime my url ends with /MyApp ex.: http://anywebsite.com/api/MyApp I'm being proxyed to http://localhost:5130. But if I try to access http://localhost:5130 or http://anywebsite.com:5130/api/MyApp I won't be able because nginx is listening to port 80 only. If you want to access another port you need to specify like this:

server {
    listen 80; 
    listen 5130; 

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

5 Comments

Not sure I follow. If you don't mind could you please edit the config file I have to reflect what you mean per above? Thanks in advance.
The configuration you sent seems to be fine according to nginx docs. What I'm saying is that you should call at port 80, not at the ports you want to redirect. What you need to do is change your client to call port 80.
My entry point via the aws dns takes me to the React app 127.0.0.1:4100 that is the port 80 nginx is listening to. The react app is the one that makes the backend calls and it is coded to make the backend api calls on 127.0.0.1:1323/api. The client error you saw was because it is displaying what the react app is trying to call in the server, but nginx is not redirecting that call to the app that is running at that port. Does that make sense?
Yes, It does. But your entry point to nginx should be always 127.0.0.1:80. Proxy_pass will make nginx to get from Port 80 to 1323, not the other way around. React should be calling 127.0.0.1:80/api/ to find the back end application
Sweeeet that did it with a minor edit, since it is running on AWS I had to point to the AWS IP per @Shawn C. suggestionThanks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.